Question

我有两个独立的服务器，一个是 nginx ，节点，另一个是 django ，带有 django-rest-framework 对于构建ding REST API，nginx负责REST API请求，节点负责客户端请求，我也使用polymer作为前端.Below是一个简短的描述：

机器一：

nginx:192.168.239.149:8888 (API listening address) forward to 192.168.239.147:8080

node:192.168.239.149:80 (client listening address)

第二台机器：

unicorn:192.168.239.147:8080(listening address)

此过程是在请求进入时，节点服务器（192.168.239.149:80）响应返回html，在html中，AJAX请求要求A PI服务器 （nginx:192.168.239.149:8888 forward to unicorn:192.168.239.147:8080），然后独角兽（192.168.239.147:8080）会返回结果。

但是有一个CORS问题，我读了很多文章，很多人遇到了同样的问题，我尝试了很多方法，但没有help.still错误。

我得到的是：

enter image description here

即：

XMLHttpRequest cannot load http://192.168.239.149:8888/article/. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers.

我的工作是：

core-ajax

<core-ajax auto headers='{"Access-Control-Allow-Origin":"*","X-Requested-With": "XMLHttpRequest"}'  url="http://192.168.239.149:8888/article/" handleAs="json" response="{{response}}"></core-ajax>

nginx的：

http {
    include       mime.types;
    default_type  application/octet-stream;
    access_log /tmp/nginx.access.log;
    sendfile on;
    upstream realservers{
                #server 192.168.239.140:8080;
                #server 192.168.239.138:8000;
                server 192.168.239.147:8080;
    }
server {
        listen       8888 default;
        server_name  example.com;
        client_max_body_size 4G;
        keepalive_timeout 5;
        location / {
             add_header Access-Control-Allow-Origin *;
                try_files $uri $uri/index.html $uri.html @proxy_to_app;
                }
location @proxy_to_app{
                add_header Access-Control-Allow-Origin *;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                #proxy_set_header X-Real-IP $remote_addr;
                proxy_redirect off;
                proxy_pass http://realservers;
        }
}
}

节点

app.listen(80, function() {
  console.log('server.js running');
});

麒麟：

return Response(serializer.data,headers={'Access-Control-Allow-Origin':'*',
                                                                           'Access-Control-Allow-Methods':'GET',
                                                                           'Access-Control-Allow-Headers':'Access-Control-Allow-Origin, x-requested-with, content-type',
                                                                           })

因为，我对CORS的经验不多，而且我想彻底理解它，有人能指出我在这里做错了什么，我会非常感谢你！

Answer 1

哇，太兴奋了，我全身心地依靠这一切，我在这里做的错误是我发送的请求标题不包含在nginx配置中add_header 'Access-Control-Allow-Headers'

完成nginx配置：

http {
    include       mime.types;
    default_type  application/octet-stream;
    access_log /tmp/nginx.access.log;
    sendfile on;
    upstream realservers{
                #server 192.168.239.140:8080;
                #server 192.168.239.138:8000;
                server 192.168.239.147:8080;
    }
server {
        listen       8888 default;
        server_name  example.com;
        client_max_body_size 4G;
        keepalive_timeout 5;
        location / {
             add_header Access-Control-Allow-Origin *;
             add_header 'Access-Control-Allow-Credentials' 'true';
             add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
             add_header 'Access-Control-Allow-Headers' 'Access-Control-Allow-Orgin,XMLHttpRequest,Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';

                try_files $uri $uri/index.html $uri.html @proxy_to_app;
                }
location @proxy_to_app{
                add_header Access-Control-Allow-Origin *;
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'Access-Control-Allow-Orgin,XMLHttpRequest,Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';

                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                #proxy_set_header X-Real-IP $remote_addr;
                proxy_redirect off;
                proxy_pass http://realservers;
        }
}
}

因为我的要求是：

core-ajax auto headers='{"Access-Control-Allow-Origin":"*","X-Requested-With": "XMLHttpRequest"}'  url="http://192.168.239.149:8888/article/" handleAs="json" response="{{response}}"></core-ajax>

我没有将Access-Control-Allow-Origin和XMLHttpRequest标头包含在nginx配置Access-Control-Allow-Headers中，这就是问题所在。

我希望它对谁有用同样有用！

Answer 2

您不必手动将CORS标头包含在请求中。浏览器会处理它，你只需要在api服务器上允许它

Access-Control-Allow-Header不允许Access-Control-Allow-Origin

2 个答案: