一點也不復雜！Nginx 可以輕鬆搞定跨域問題

當你遇到跨域問題，不要立刻就選擇複製去嘗試。請詳細看完這篇文章再處理 。我相信它能幫到你。

分析前準備：

• 前端網站地址：

• 服務端網址：

首先保證服務端是沒有處理跨域的，其次，先用 Postman 測試服務端介面是正常的

跨域主要涉及4個響應頭：

• Access-Control-Allow-Origin：用於設定允許跨域請求源地址 （預檢請求和正式請求在跨域時候都會驗證）

• Access-Control-Allow-Headers：跨域允許攜帶的特殊頭資訊欄位 （只在預檢請求驗證）

• Access-Control-Allow-Methods：跨域允許的請求方法或者說HTTP動詞 （只在預檢請求驗證）

• Access-Control-Allow-Credentials：是否允許跨域使用cookies，如果要跨域使用cookies，可以新增上此請求響應頭，值設為true（設定或者不設定，都不會影響請求傳送，只會影響在跨域時候是否要攜帶cookies，但是如果設定，預檢請求和正式請求都需要設定）。不過不建議跨域使用（專案中用到過，不過不穩定，有些瀏覽器帶不過去），除非必要，因為有很多方案可以代替。

server {
listen       22222;
server_name  localhost;     
location  / {         
proxy_pass  ;     
}  
}

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin '' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

server {      
listen       22222;      
server_name  localhost;      
location  / {         
add_header Access-Control-Allow-Origin '';         
proxy_pass  ;       
}  
}

不過我們的配置沒什麼問題，問題在Nginx

server {  

    listen       22222;  

    server_name  localhost;  

    location  / {  

       add_header Access-Control-Allow-Origin '' always;  

       proxy_pass  ;   

    }  

}

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin '' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

server {      
listen       22222;      
server_name  localhost;      
location  / {         
add_header Access-Control-Allow-Origin '' always;         
if ($request_method = 'OPTIONS') {              
return 204;         }         
proxy_pass  ;       }  }

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin '' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

server {          
listen       22222;          
server_name  localhost;          
location  / {             
add_header Access-Control-Allow-Origin '' always;             
if ($request_method = 'OPTIONS') {               
add_header Access-Control-Allow-Headers 'authorization'; 
#為什麼寫在if裡面而不是接著Access-Control-Allow-Origin往下寫？
因為這裡只有預檢請求才會檢查               
return 204;           }         
proxy_pass ;    
}  
}

此時發現報錯問題又回到了情況1

官方文件是這樣說的：

There could be several add_header directives. These directives are inherited from the previous level if and only if there are no add_header directives defined on the current level.

配置修改如下：

server {      
listen       22222;      
server_name  localhost;      
location  / {          
add_header Access-Control-Allow-Origin '' always;          
if ($request_method = 'OPTIONS') {              
add_header Access-Control-Allow-Origin '';              
add_header Access-Control-Allow-Headers 'authorization';             
return 204;          
}          
proxy_pass  ;       
}  
}

此時改完發現跨域問題已經解決了，

server {      
listen       22222;      
server_name  localhost;      
location  / {          
if ($request_method = 'OPTIONS') {              
add_header Access-Control-Allow-Origin '';              
add_header Access-Control-Allow-Headers 'authorization';              
return 204;          
}          
if ($request_method != 'OPTIONS') {              
add_header Access-Control-Allow-Origin '' always;          
}          
proxy_pass  ;       
}  
}

還沒完，繼續聊 ↓↓

情況4：

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin '' has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

server {      
listen 22222;      
server_name localhost;      
location / {          
if ($request_method = 'OPTIONS') {              
add_header Access-Control-Allow-Origin '';              
add_header Access-Control-Allow-Headers 'content-type,authorization';              
add_header Access-Control-Allow-Methods 'PUT';
#為這麼只加在這個if中，不再下面的if也加上？因為這裡只有預檢請求會校驗，當然你加上也沒事。
return 204;          
}          
if ($request_method != 'OPTIONS') {              
add_header Access-Control-Allow-Origin '' always;          
}          
proxy_pass ;      
}  
}

這裡注意一下，改成PUT型別後，Access-Control-Allow-Headers請求響應頭又會自動校驗content-type這個請求頭，和情況3是一樣的，缺啥補啥就行了。如果不加上content-type，則會報如下錯誤。

情況5：

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin '' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, ', but only one is allowed.

意思就是此刻 Access-Control-Allow-Origin 請求響應頭返回了多個，而只允許有一個，這種情況當然修改配置去掉 Access-Control-Allow-Origin 這個配置就可以了，不過遇到這種情況，建議Nginx配置和服務端自己解決跨域只選其一。

所以為什麼說要不服務端程式碼層面解決跨域，要不就Nginx代理解決，不要混著搞，不然不明白原理的人，網上找一段程式碼貼就很可能解決不了問題

再貼一份完整配置（*號根據自己‘喜好’填寫）：

server {      
listen       22222;      
server_name  localhost;      
location  / {          
if ($request_method = 'OPTIONS') {              
add_header Access-Control-Allow-Origin '';              
add_header Access-Control-Allow-Headers '*';              
add_header Access-Control-Allow-Methods '*';              
add_header Access-Control-Allow-Credentials 'true';              
return 204;          
}          
if ($request_method != 'OPTIONS') {              
add_header Access-Control-Allow-Origin '' always;              
add_header Access-Control-Allow-Credentials 'true';          
}          
proxy_pass  ;       
}  
}

或者：

server {      
listen       22222;      
server_name  localhost;      
location  / {          
add_header Access-Control-Allow-Origin '' always;          
add_header Access-Control-Allow-Headers '*';          
add_header Access-Control-Allow-Methods '*';          
add_header Access-Control-Allow-Credentials 'true';          
if ($request_method = 'OPTIONS') {              
return 204;          }          
proxy_pass  ;       
}  
}

來源：cnblogs.com/fnz0/p/15803011.html