nginx 配置跨域失效修復的方法示例

2022-10-14 13:16| 查看: 1358 |來源: 互聯網

nginx 配置跨域不生效如下配置 server { listen 80; server_name localhost; # 接口轉發 location /api/ { # 允許請求地址跨域 * ...

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

[code]
server {
  listen  80;
  server_name localhost;
  
  # 接口轉發
  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_pass 127.0.0.1:8081/;
  }
 }

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

nginx 修改如下配置后生效

server {
  listen  80;
  server_name localhost;
  
  # 接口轉發
  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' ) { 
    return 200;
   }
   # 設置反向代理 
   proxy_pass 127.0.0.1:8081/;
  }
 }

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

if ( $request_method = 'OPTIONS' ) { 
  return 200;
}

因為 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;

加了斜杠意味著所有的 /api 請求都會轉發到根目錄下，也就是說 /api 會被 / 替代，這個時候接口路徑就變了，少了一層 /api 。而不加斜杠的時候呢？這代表著轉發到127.0.0.1:8081的域名下， /api 的路徑不會丟失

以上就是小編給大家介紹的nginx 配置跨域失效修復的方法示例，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

本文最后更新于 2022-10-14 13:16，某些文章具有時效性，若有錯誤或已失效，請在網站留言或聯系站長：17tui@17tui.com

·END·

站長網微信號：w17tui，關注站長、創業、關注互聯網人 - 互聯網創業者營銷服務中心

免責聲明：本站部分文章和圖片均來自用戶投稿和網絡收集，旨在傳播知識，文章和圖片版權歸原作者及原出處所有，僅供學習與參考，請勿用于商業用途，如果損害了您的權利，請聯系我們及時修正或刪除。謝謝！

下一篇：CentOS7系統增加swap的操作方法實例上一篇：開放windows服務器端口(以打開端口8080為例)

17站長網微信二維碼

始終以前瞻性的眼光聚焦站長、創業、互聯網等領域，為您提供最新最全的互聯網資訊，幫助站長轉型升級，為互聯網創業者提供更加優質的創業信息和品牌營銷服務，與站長一起進步！讓互聯網創業者不再孤獨！

掃一掃，關注站長網微信

精品免费在线观看-精品欧美-精品欧美成人bd高清在线观看-精品欧美高清不卡在线-精品欧美日韩一区二区

nginx 配置跨域失效修復的方法示例

大家都在看

相關分類

熱門排行

最近更新