服務器

這篇文章給大家介紹在nginx中配置跨域失效如何解決，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

nginx 配置跨域不生效 如下配置

server{listen80;server_namelocalhost;#接口轉發location/api/{#允許請求地址跨域*做為通配符add_header'Access-Control-Allow-Origin''*';#設置請求方法跨域add_header'Access-Control-Allow-Methods''GET,POST,OPTIONS,PUT,DELETE';#設置是否允許cookie傳輸add_header'Access-Control-Allow-Credentials''true';#設置請求頭這里為什么不設置通配符*因為不支持add_header'Access-Control-Allow-Headers''Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';#設置反向代理proxy_pass127.0.0.1:8081/;}}

網上的 nginx 跨域配置主要是以上版本，然而很多都是抄一抄，并沒有真的去實踐，故寫了下文章提醒下有需要的人，不要盲目抄，學會分析。

nginx 修改如下配置后生效

server{listen80;server_namelocalhost;#接口轉發location/api/{#允許請求地址跨域*做為通配符add_header'Access-Control-Allow-Origin''*';#設置請求方法跨域add_header'Access-Control-Allow-Methods''GET,POST,OPTIONS,PUT,DELETE';#設置是否允許cookie傳輸add_header'Access-Control-Allow-Credentials''true';#設置請求頭這里為什么不設置通配符*因為不支持add_header'Access-Control-Allow-Headers''Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';#設置options請求處理if($request_method='OPTIONS'){return200;}#設置反向代理proxy_pass127.0.0.1:8081/;}}

兩者代碼區別 主要就是下面這行代碼

if($request_method='OPTIONS'){return200;}

因為 post 請求 瀏覽器會發送一個 options 的預檢請求，主要將本次的請求頭 發送給服務端，若服務端允許，再發送真正的post請求，所以 f12 看到，經常 post 會發送兩次請求。因為后端 java 代碼沒有對 options 請求做出處理，導致 options 接口請求的時候，報 403 forbidden , 這里 nginx 對 options 的請求直接返回 200，不用到達接口層，直接允許 post 響應頭，即可使得上述失效配置能夠生效

附贈 一個小知識點

proxy_pass 127.0.0.1:8081/;

針對反向代理里面這個/ 加不加的問題；

訪問 http://localhost/api/user/login;

加/ 則 實際訪問的是 127.0.0.1:8081/user/login;

不加 / 則實際訪問的是 127.0.0.1:8081/api/user/login;

關于在nginx中配置跨域失效如何解決就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

總結

以上是生活随笔為你收集整理的在nginx中配置跨域失效如何解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。