nginx 解決跨域問題 No: 'Access-Control-Allow-Origin' header is present on the requested resource.

錯誤信息：

1，

2，

Provisional headers are shown
Access-Control-Request-Headers: token
Access-Control-Request-Method: POST
Origin: http://127.0.0.1:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

3，Failed to load http://xxx.com/jquery/upload: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:63342' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

 

解決辦法：

1，如果前端沒有POST或GET請求，配置如下

location /jquery/upload {

　　if ($request_method = 'OPTIONS') {
　　　　add_header Access-Control-Allow-Origin *;
　　　　add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
　　　　add_header Access-Control-Allow-Headers *;
　　　　add_header Access-Control-Allow-Credentials 'true';
　　　　return 200;
　　}

 

2，如何前端那邊是post請求，還有header參數，此時需要在if判斷中加入post

location /jquery/upload {

            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
                add_header Access-Control-Allow-Headers *;
        　　　　 add_header Access-Control-Allow-Credentials 'true'; 
                return 200;
            }

            if ($request_method = 'POST') {
                add_header Access-Control-Allow-Origin *;
        　　　　 add_header Access-Control-Allow-Credentials 'true'; 
                add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
                add_header Access-Control-Allow-Headers *;
            }


        　　 proxy_pass http://192.168.99.67:8089/jquery/upload;
            proxy_set_header X-real-ip $remote_addr;

        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
   }

3，關於 add_header 'Access-Control-Allow-Headers' 這條的配置

網上大部分配置：

add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
但測試多測仍失敗，最后只好改為：

add_header Access-Control-Allow-Headers *;

4，另一參考版本：

if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
    return 204;
    }

if ($request_method = 'POST') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

if ($request_method = 'GET') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

 

5，測試成功信息

補充：

一次測試中，前端反饋說header無法獲取到，經測試調整配置文件如下：

server {
        listen       80;
        server_name  senyint-pay.lugangtech.com;
        location / {    
            set $origin '*';
            if ($http_origin) {
                set $origin "$http_origin";
            }
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' "$origin";
                add_header 'Access-Control-Allow-Credentials' "true";
                add_header 'Access-Control-Max-Age' 86400;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'content-type, authorization, x-requested-with, token, userType'; ##注意，此處的token 取決於開發，有時候是user-token or doctor-token等。
                add_header 'Content-Length' 0;
                add_header 'Content-Type' 'text/plain, charset=utf-8';
                return 204;
            }

　　　　　　　　proxy_redirect off;
　　　　　　　　proxy_set_header Host $host;
　　　　　　　　proxy_set_header X-Real-IP $remote_addr;
　　　　　　　　proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
　　　　　　　　proxy_set_header Accept-Encoding 'gzip';
　　　　　　　　proxy_pass http://testibabywechat;

　　　　}

　　　　

返回代碼可以自定義，204、202、200都行。