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

【问题标题】：Access-Control-Allow-Origin is not allowed by Access-Control-Allow-HeadersAccess-Control-Allow-Headers 不允许 Access-Control-Allow-Origin
【发布时间】：2015-06-17 16:14:19
【问题描述】：

我有两个独立的服务器，一个是 nginx 和 node，另一个是 django 和 django-rest-framework 用于构建 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)响应返回html，在html中AJAX请求请求API服务器(@ 987654329@)，然后unicorn(192.168.239.147:8080)返回结果。

但是有一个CORS的问题，我看了很多文章，很多人都遇到过同样的问题，我尝试了很多方法，但没有帮助。仍然错误。

我得到的是：

即：

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的经验不多，想彻底理解，谁能指出我在这里做错了什么，非常感谢！

【问题讨论】：

标签： django http cors polymer django-rest-framework

【解决方案1】：

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

【讨论】：

是的，只是为了测试，我忘记评论了。

【解决方案2】：

哇，好激动，我自己解决了这一切，我在这里做错的是我发送的请求标头未包含在 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>

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

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

【讨论】：