Почему CORS работает для запросов API, но не для медиафайлов (например, mp4, webm) в моей конфигурации Nginx? - PullRequest
Новая
       23

Почему CORS работает для запросов API, но не для медиафайлов (например, mp4, webm) в моей конфигурации Nginx?

0 голосов
/ 10 мая 2019

Я установил сервер Nginx в Ubuntu, который обслуживает два веб-сайта. Одним из них является Wordpress, предоставляющий свой API-контент, а другим - интерфейсное приложение, использующее API-интерфейс с использованием Axios.

Я могу запрашивать и читать содержимое JSON из API, и проверка заголовков ответов совпадает с моей конфигурацией CORS. Но в Chrome я получаю сообщение об ошибке CORS в консоли для всех медиа-файлов (.mp4, .webm), которые приложение пытается использовать после чтения их URI из содержимого API. 

Access to video at 'https://api.example.com/wp-content/uploads/2019/05/Seiho-Edited_compress.mp4' 
from origin 'https://next.example.com' 
has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

На Firefox работает нормально.

Обратите внимание, что при вставке URI мультимедиа в адресную строку в Chrome мультимедиа отображается так, как ожидается. Также не то, что теги видео используют crossorigin="anonymous".

Что я делаю не так?

Ниже приведен мой конфиг Nginx, на случай, если я пропустил какую-то явную проблему. 

server {
    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/api.example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/api.example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    root /var/www/example.com/backend;
    server_name api.example.com;
    access_log /var/log/nginx/unicorn_access.log;
    error_log /var/log/nginx/unicorn_error.log;

    charset                     utf-8;
    gzip                        off;

    # Set CORS policy
    set $cors_origin            "";
    set $cors_cred              "";
    set $cors_header            "";
    set $cors_method            "";

    if ($http_origin ~ '^https?:\/\/(localhost|next.example\.com)$') {
        set $cors_origin        $http_origin;
        set $cors_cred          true;
        set $cors_header        $http_access_control_request_headers;
        set $cors_method        $http_access_control_request_method;
    }

    add_header Access-Control-Allow-Origin      $cors_origin;
    add_header Access-Control-Allow-Credentials $cors_cred;
    add_header Access-Control-Allow-Headers     $cors_header;
    add_header Access-Control-Allow-Methods     $cors_method;

    location / {
        index                   index.php index.html;
        try_files               $uri $uri/ /index.php?$args;
    }

    client_max_body_size        50m;

    # Add trailing slash to */wp-admin requests.
    rewrite /wp-admin$ $scheme://$host$uri/ permanent;

    # Prevents hidden files (beginning with a period) from being served
    location ~ /\. {
        access_log              off;
        log_not_found           off;
        deny                    all;
    }

    # Send 'expires' headers and turn off 404 logging
    location ~* ^.+.(xml|ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
        access_log              off;
        log_not_found           off;
        expires                 max;
    }

    # Pass all .php files onto a php-fpm or php-cgi server
    location ~ \.php$ {
        try_files               $uri =404;
        include                 /etc/nginx/fastcgi_params;
        fastcgi_read_timeout    3600s;
        fastcgi_buffer_size     128k;
        fastcgi_buffers         4 128k;
        fastcgi_param           SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_pass            unix:/run/php/php7.2-fpm.sock;
        fastcgi_index           index.php;
    }

    # Robots
    location = /robots.txt {
        allow all;
        log_not_found off;
        access_log off;
    }

    # Restrictions
    location ~* /(?:uploads|files)/.*\.php$ {
        deny all;
    }
}

Ответы [ 2 ]

0 голосов
/ 11 мая 2019

Обычно в ответах об ошибках отсутствуют соответствующие заголовки CORS / Access-Control-*.

В следующий раз, когда вы столкнетесь с этим, откройте инструменты разработчика своего браузера и проверьте HTTP-ответ.Скорее всего, вместо 2xx.

вы увидите какой-то статус ошибки. Вы упомянули, что очистка файлов cookie решила проблему.Я предполагаю, что в вашем приложении произошла какая-то ошибка, и очистка куки просто исправила это условие ошибки.Поэтому ответы CORS снова начали работать, как и ожидалось.

0 голосов
/ 10 мая 2019

Конфигурация не была ошибочной.

Я попытался запустить приложение на новом профиле пользователя Chrome, лишенном надстроек. Затем мне удалось запустить его в моем главном профиле Chrome после удаления всех моих файлов cookie . Я не могу объяснить обоснование этого, но это работает. У меня пока есть виновник среди плагинов, которые я использую, но я закрываю эту проблему, поскольку она не связана с Nginx.

...