溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

在nginx中配置跨域失效如何解決

發(fā)布時(shí)間:2021-05-07 16:11:26 來源:億速云 閱讀:1258 作者:Leah 欄目:服務(wù)器

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

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

server {
  listen  80;
  server_name localhost;
  
  # 接口轉(zhuǎn)發(fā)
  location /api/ {
   # 允許請(qǐng)求地址跨域 * 做為通配符
   add_header 'Access-Control-Allow-Origin' '*';
   # 設(shè)置請(qǐng)求方法跨域
   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
   # 設(shè)置是否允許 cookie 傳輸
   add_header 'Access-Control-Allow-Credentials' 'true';
   # 設(shè)置請(qǐng)求頭 這里為什么不設(shè)置通配符 * 因?yàn)椴恢С?
   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';
   # 設(shè)置反向代理 
   proxy_pass 127.0.0.1:8081/;
  }
 }

網(wǎng)上的 nginx 跨域配置主要是以上版本,然而很多都是抄一抄,并沒有真的去實(shí)踐,故寫了下文章提醒下有需要的人,不要盲目抄,學(xué)會(huì)分析。

nginx 修改如下配置后生效

server {
  listen  80;
  server_name localhost;
  
  # 接口轉(zhuǎn)發(fā)
  location /api/ {
   # 允許請(qǐng)求地址跨域 * 做為通配符
   add_header 'Access-Control-Allow-Origin' '*';
   # 設(shè)置請(qǐng)求方法跨域
   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
   # 設(shè)置是否允許 cookie 傳輸
   add_header 'Access-Control-Allow-Credentials' 'true';
   # 設(shè)置請(qǐng)求頭 這里為什么不設(shè)置通配符 * 因?yàn)椴恢С?
   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';
   
   # 設(shè)置 options 請(qǐng)求處理
   if ( $request_method = 'OPTIONS' ) { 
    return 200;
   }
   # 設(shè)置反向代理 
   proxy_pass 127.0.0.1:8081/;
  }
 }

兩者代碼區(qū)別 主要就是下面這行代碼

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

因?yàn)?post 請(qǐng)求 瀏覽器會(huì)發(fā)送一個(gè) options 的預(yù)檢請(qǐng)求,主要將本次的請(qǐng)求頭 發(fā)送給服務(wù)端,若服務(wù)端允許,再發(fā)送真正的post請(qǐng)求,所以 f12 看到,經(jīng)常 post 會(huì)發(fā)送兩次請(qǐng)求。因?yàn)楹蠖?java 代碼沒有對(duì) options 請(qǐng)求做出處理,導(dǎo)致 options 接口請(qǐng)求的時(shí)候,報(bào) 403 forbidden , 這里 nginx 對(duì) options 的請(qǐng)求直接返回 200,不用到達(dá)接口層,直接允許 post 響應(yīng)頭,即可使得上述失效配置能夠生效

附贈(zèng) 一個(gè)小知識(shí)點(diǎn)

proxy_pass 127.0.0.1:8081/;

針對(duì)反向代理里面這個(gè)/ 加不加的問題;

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

  • 加/ 則 實(shí)際訪問的是 127.0.0.1:8081/user/login;

  • 不加 / 則實(shí)際訪問的是 127.0.0.1:8081/api/user/login;

關(guān)于在nginx中配置跨域失效如何解決就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI