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

Question

我有两个独立的服务器，一个是 nginx with node，另一个是 django 使用 django-rest-framework 构建 ding REST API，nginx 负责 REST API 请求，node 负责客户端请求，我也是使用 polymer 作为前端。以下是简要说明：

机器一：

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)响应returnhtml，在html 一个 AJAX 请求请求 API server(nginx:192.168.239.149:8888 forward to unicorn:192.168.239.147:8080)，然后 unicorn(192.168.239.147:8080) returns 结果。

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

我得到的是：

即：

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

哇，太激动了，我自己解决了这一切，我在这里做错的是我发送的请求 header 没有包含在 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 header 包含到 nginx 配置中 Access-Control-Allow-Headers，所以这就是问题所在。

希望对遇到同样问题的人有用！

Answer 2

您不必手动将 CORS header 包含到请求中。浏览器会处理它，您只需要在 api 服务器

上允许它

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

Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers

django

http

cors

polymer

django-rest-framework