CORS 策略已阻止从源 [domain] 访问 [Img Link] 上的图像

Question

我有一个域 domain.com，我在其中托管了我的 VueJs 应用程序，我有一个域 api.domain.com，我在其中托管了我的 Django API。我在 AWS（EC2 ubuntu 实例）上托管了这两个应用程序。 我在 NGINX.conf 中发送 add_header 'Access-Control-Allow-Origin' '*' always; 时收到此图像 CORS 错误

Access to image at 'http://api.deshpardesh.in/media/newspapers/images_qseNU9o.jpeg' from origin 'http://deshpardesh.in' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 

这是实际错误。

Answer 1

对我来说有两个问题。

一个是 nginx 只处理它在树中发现的最后一个 add_header。因此，如果您在服务器上下文中有一个 add_header，然后在位置嵌套上下文中有另一个，它只会处理位置上下文中的 add_header 指令。只有最深的上下文。

来自关于 add_header 的 NGINX 文档：

可能有多个 add_header 指令。当且仅当当前级别上没有定义 add_header 指令时，这些指令才从上一层继承。

第二个问题是我的 location / {} 块实际上是将 nginx 发送到另一个位置 ~* (.php)$ 块（因为它会通过 index.php 重新路径所有请求，这实际上使 nginx处理这个 php 块）。所以，我在第一个 location 指令中的 add_header 指令没有用，在我将所有需要的指令放入 php location 指令后它开始工作。

最后，这是我的工作配置，允许在名为 Laravel 的 MVC 框架的上下文中使用 CORS（您可以轻松更改此配置以适应任何将 index.php 作为所有请求的单一入口点的 PHP 框架）。

server {
    root /path/to/app/public;
    index index.php;

    server_name test.dev;

    # redirection to index.php
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        # NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini

        # With php5-fpm:
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;

        # cors configuration
        # whitelist of allowed domains, via a regular expression
        # if ($http_origin ~* (http://localhost(:[0-9]+)?)) {
        if ($http_origin ~* .*) { # yeah, for local development. tailor your regex as needed
             set $cors "true";
        }

        # apparently, the following three if statements create a flag for "compound conditions"
        if ($request_method = OPTIONS) {
            set $cors "${cors}options";
        }

        if ($request_method = GET) {
            set $cors "${cors}get";
        }

        if ($request_method = POST) {
            set $cors "${cors}post";
        }

        # now process the flag
        if ($cors = 'trueget') {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
        }

        if ($cors = 'truepost') {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
        }

        if ($cors = 'trueoptions') {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';

            add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';

            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            return 204;
        }
    }

    error_log /var/log/nginx/test.dev.error.log;
    access_log /var/log/nginx/test.dev.access.log;
}

以上内容的要点在：https://gist.github.com/adityamenon/6753574