Question

我已经在Ubuntu上设置了Nginx服务器，该服务器提供两个网站。一个是Wordpress交付其API内容，另一个是使用Axios使用API的前端应用程序。

我可以从API查询和读取JSON内容，并检查响应标头是否与我的CORS配置相匹配。但是在Chrome上，在从API内容读取URI之后，应用程序尝试使用的所有媒体文件（.mp4，.webm）在控制台上收到CORS错误。

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;
    }
}

Answer 1

配置没有错误。

我尝试在没有附加组件的新Chrome用户配置文件上成功运行该应用程序。然后，我删除了所有Cookie 后，便在我的主要Chrome配置文件上运行了该文件。我无法解释其背后的基本原理，但确实有效。我还没有使用过的插件中的罪魁祸首，但是由于这个问题与Nginx无关，因此我正在解决此问题。

Answer 2

错误响应没有适当的CORS / john this is a test标头是很常见的。

下次您遇到此问题时，请打开浏览器的开发人员工具并检查HTTP响应。您可能会看到一些错误状态，而不是Access-Control-*。

您提到清除Cookie可以解决此问题。我猜测您的应用程序上游存在一些错误，清除cookie只能解决该错误情况。因此，CORS响应再次开始按预期工作。

为什么CORS可以在我的Nginx配置中处理API请求，但不能处理媒体文件（例如mp4，webm）？

2 个答案: