CORS策略已阻止从源[域]访问[Img链接]上的镜像

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，然后在location嵌套上下文中又有另一个，那么它将只处理location上下文中的add_header指令。只有最深层的背景。

来自add_header上的NGINX文档：

可能有几个add_header指令。当且仅当在当前级别上未定义add_header指令时，才会从上一级别继承这些指令。

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

最后，我的工作配置是在一个名为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