nginx配置CORS實現跨域

ashe 發布于2019-07-25 14:05 / 3382人閱讀

摘要：場景最近有個上傳圖片的需求，為了分流，將接口部署到另一個多帶帶的域名，所以需要解決跨域的問題。同時只能對指定子域名放開訪問權限，所以設置如下。實現還好支持指令，對域名做下正則校驗就可以實現指定子域名跨域。

場景

最近有個上傳圖片的需求，為了分流，將接口部署到另一個多帶帶的域名，所以需要解決跨域的問題。

思路

一開始想著在后端代碼直接設置cors策略，后來發現請求都是從nginx進入，所以將cors移動到nginx下實現。同時只能對指定子域名放開訪問權限，所以設置如下。

Access-Control-Allow-Origin *.test.com

親測不可用，只能是*和指定的域名。

實現

還好nginx支持if指令，對域名做下正則校驗就可以實現指定子域名跨域。
接下來測試發現瀏覽器的options發到后端后，沒有處理返回了一些莫名其妙的東西。
好吧直接在nginx返回不發給后端，還是用if指令判斷http請求類型。
這里就用了兩個if，最坑的事情出現了，nginx在多個if指令下，有些指令是最后一個if才有效，前面的會被覆蓋。
最終還是直接重復add_header解決。

注意點

客戶端ajax請求withCredentials屬性設置為true才會發送cookie。
同時cookie要是上傳域名可用的，不然還是要通過url參數等方式去傳遞。

nginx配置

location / {
   # 檢查域名后綴
   if ($http_origin ~ .test.com) {
        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
        add_header Access-Control-Allow-Credentials true;
        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;
   }
   # options請求不轉給后端，直接返回204
   # 第二個if會導致上面的add_header無效，這是nginx的問題，這里直接重復執行下
   if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
        add_header Access-Control-Allow-Credentials true;
        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;
        return 204;
   }
    
   # 其他請求代理到后端
   proxy_set_header Host $host;
   proxy_redirect off;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Scheme $scheme;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header X-Forwarded-Proto $scheme;
   proxy_pass http://xxx.xxx.xxx.xxx;
}

GPU云服務器云服務器 nginx服務器跨域實現跨域 js實現跨域訪問 nginx配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/39697.html

CORS方式實現ajax跨域 --- nginx配置

摘要：目前，所有瀏覽器都支持該功能，瀏覽器不能低于。因此，實現通信的關鍵是服務器。如果指定的域名在許可范圍內，服務器返回的響應，會多出頭信息字段也可能多出其他可選字段或者是表示接受任意域名的請求。實際跨域問題及其解決方案 1.課題：ajax實現跨域訪問 2.背景： 1.畫面服務器：192.168.196.6 → tomcat服務2.js模板服務器：192.168.196.8 → ngi...

csRyan 2019-07-25 14:23 評論0 收藏0
CORS跨域與Nginx反向代理跨域優劣對比

摘要：最近寫了一些關于前后端分離項目之后，跨域相關方案的基本原理和常見誤區的帖子，主要包括和反向代理。反向代理此時后端相當于不跨域，和正常請求一致，無需額外配置。最近寫了一些關于前后端分離項目之后，跨域相關方案的基本原理和常見誤區的帖子，主要包括CORS和Nginx反向代理。這兩種方案項目中都有在用，各有優缺，關于具體使用哪種方案，大家的觀點也不大一致，本文主要就此展開一下，從前后端及服務...

yiliang 2019-07-25 14:26 評論0 收藏0
徹底弄懂跨域問題

摘要：用于告知瀏覽器可以將預先檢查請求返回結果緩存的時間，在緩存有效期內，瀏覽器會使用緩存的預先檢查結果判斷是否發送跨域請求。跨域，老生常談的問題簡述作為一只前端菜鳥，跨域方面只懂得JSONP和CORS，并未曾深入了解。但隨著春招越來越近，就算是菜鳥也要猛振翅膀。近幾日仔細研究了跨域問題，寫下這篇文章，希望對開發者們有所幫助。在讀本文前，希望您對以下知識略有了解。瀏覽器同源策略 n...

rose 2019-07-25 14:36 評論0 收藏0
徹底弄懂跨域問題

摘要：瀏覽器同源策略我們為何要研究跨域問題因為瀏覽器的同源策略規定某域下的客戶端在沒明確授權的情況下，不能讀寫另一個域的資源。跨域，老生常談的問題簡述作為一只前端菜鳥，跨域方面只懂得JSONP和CORS，并未曾深入了解。但隨著春招越來越近，就算是菜鳥也要猛振翅膀。近幾日仔細研究了跨域問題，寫下這篇文章，希望對開發者們有所幫助。在讀本文前，希望您對以下知識略有了解。瀏覽器同源策略 n...

CoorChice 2019-08-23 14:41 評論0 收藏0