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

问题

I have two separate server,one is nginx with node,and another one is django with django-rest-framework for build ding REST API,nginx is responsible for the REST API request,node takes care of client request, also i use polymer for the frontend .Below are a brief description:

machine one:

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)

machine two:

unicorn:192.168.239.147:8080(listening address)

The process is when a request comes in,node server(192.168.239.149:80) responses to return html,in html an AJAX request ask for API server(nginx:192.168.239.149:8888 forward to unicorn:192.168.239.147:8080),and then unicorn(192.168.239.147:8080) returns the result.

but there is a CORS problem,I read a lot article,and many people met the same questions,I tried many methods,but no help.still error.

what i get is :

that is:

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.

What i do is :

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;
        }
}
}

node:

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

unicorn:

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',
                                                                           })

Because,I have not much experience on CORS,and I want to understand it thoroughly,can anyone point out what i was doing wrong here,I will thank you very much!

回答1:

Wow,so excited,I sovled this all by my self,what i do wrong here is that the request header i sent is not included in the nginx config add_header 'Access-Control-Allow-Headers'

complete nginx config:

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;
        }
}
}

because my request is :

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>

i didnt include the Access-Control-Allow-Origin and XMLHttpRequest header into the nginx config Access-Control-Allow-Headers,so that is the problem.

I hope its useful to whom has the same problem!