Nginx跨域設定
阿新 • • 發佈：2020-11-29
一、 跨域概述
1.1 同源策略
同源策略是一個安全策略，同源指的是協議、域名、埠相同。瀏覽器處於安全方面的考慮，只允許本域名下的介面互動，不同源的客戶端指令碼，在沒有明確授權的情況下，不能讀寫對方的資源。
同源策略主要是基於如下可能的安全隱患：
- 使用者訪問www.mybank.com，登入並進行網銀操作，這時cookie等資源都生成並存放在瀏覽器；
- 使用者突然訪問另一個網站；
- 該網站在頁面中，拿到銀行的cookie，比如使用者名稱，登入token等，然後發起對www.mybank.com的操作；
- 若此時瀏覽器不對跨域做限制，並且銀行也沒有做響應的安全處理的話，那麼使用者的資訊有可能就這麼洩露了。
1.2 跨域簡介
CORS是一個W3C標準，全稱是跨域資源共享(Cross-origin resource sharing)。即從一個域名的網頁去請求另一個域名的資源。本質上對於此類請求，只要協議、域名、埠有任何一個的不同，就被當作是跨域，即都被當成不同源。
通常基於安全考慮，Nginx啟用了同源策略，即限制了從同一個源載入的文件或指令碼如何與來自另一個源的資源進行互動。這是一個用於隔離潛在惡意檔案的重要安全機制。
但若同一個公司內部存在多個不同的子域，子域之間需要互訪，此時可通過跨域進行實現。跨域可通過JSONP和CORS進行實現。
注意：
- 如果是協議和埠造成的跨域問題"前端"是無法解決的；
- 在跨域實現上，僅僅是通過"URL的首部"來識別而不會根據域名對應的IP地址是否相同來判斷。"URL的首部"可以理解為"協議,域名和埠必須匹配"；
- 請求跨域並不是請求發不出去，請求可正常發出，服務端能收到請求並正常返回結果，只是結果被瀏覽器攔截了。
提示：本實驗基於Nginx的CORS實現跨域，更多JSONP等參考：https://juejin.im/post/5e6c58b06fb9a07ce01a4199。
1.3 跨域處理流程
- 首先檢視http頭部有無origin欄位；
- 如果沒有，或者不允許，直接當成普通請求處理，結束；
- 如果有並且是允許的，那麼再看是否是preflight(method=OPTIONS)；
- 如果是preflight，就返回Allow-Headers、Allow-Methods等，內容為空；
- 如果不是preflight，就返回Allow-Origin、Allow-Credentials等，並返回正常內容。
1 location /pub/(.+) { 2 if ($http_origin ~ <允許的域（正則匹配）>) { 3 add_header 'Access-Control-Allow-Origin' "$http_origin"; 4 add_header 'Access-Control-Allow-Credentials' "true"; 5 if ($request_method = "OPTIONS") { 6 add_header 'Access-Control-Max-Age' 86400; 7 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE'; 8 add_header 'Access-Control-Allow-Headers' 'reqid, nid, host, x-real-ip, x-forwarded-ip, event-type, event-id, accept, content-type'; 9 add_header 'Content-Length' 0; 10 add_header 'Content-Type' 'text/plain, charset=utf-8'; 11 return 204; 12 } 13 } 14 # 正常nginx配置 15 ...... 16 }
二 CORS介紹
2.1 CORS實現
CORS需要瀏覽器和後端同時支援。在後端配置了CORS實現跨域後，瀏覽器會自動進行CORS通訊，從而實現跨域。
2.2 請求型別
在使用CORS的場景下，對於客戶端（前端）的常見請求，可分類如下兩類請求：
- 簡單請求：只要同時滿足以下兩個條件，就屬於簡單請求
方法：GET、HEAD、POST。
內容：Content-Type 的值僅限於下列三者之一 :
- text/plain；
- multipart/form-data；
- application/x-www-form-urlencoded 請求中的任意 XMLHttpRequestUpload 物件均沒有註冊任何事件監聽器。
- 複雜請求
方法：DELETE、PUT。
不符合以上條件的請求就肯定是複雜請求了。複雜請求的CORS請求，會在正式通訊之前增加一次HTTP查詢請求，稱為"預檢"請求。該請求是option方法的，通過該請求來獲知服務端是否允許跨域請求。
三 Nginx跨域配置
3.1 配置語法
語法：add_header name value [always];
預設值：——
可配置段：http, server, location, if in location
配置項釋義：
- Access-Control-Allow-Origin：配置 為 * 表示伺服器可以接受所有的請求源（Origin），即接受所有跨域的請求，也可以指定一個確定的URL。
- Access-Control-Allow-Headers：配置 Access-Control-Allow-Headers代表允許在請求該地址的時候帶上指定的請求頭，例如：Content-Type，Authorization，使用逗號（,）拼接起來放在雙引號（"）中，可根據實際請求型別新增，可防止出現以下錯誤：Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response。這個錯誤表示當前請求Content-Type的值不被支援。其實是因為發起了"application/json"的型別請求導致的。
- Access-Control-Allow-Methods：配置 Access-Control-Allow-Methods，代表允許使用指定的方法請求該地址，常見的方法有：GET, POST, OPTIONS, PUT, PATCH, DELETE, HEAD。可防止出現以下錯誤：Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
- Access-Control-Max-Age：配置 Access-Control-Max-Age，代表著在 86400 秒之內不用請求該地址的時候 不需要再進行預檢請求，也就是跨域快取。
- Access-Control-Allow-Credentials 'true'：可選欄位，為true表示允許傳送Cookie。同時，傳送時，必須設定XMLHttpRequest.withCredentials為true才有效，請求若伺服器不允許瀏覽器傳送，刪除該欄位即可。
- return 204：給OPTIONS 新增 204 的返回，為了處理在傳送POST請求時Nginx依然拒絕訪問的錯誤，傳送"預檢請求"時，需要用到方法 OPTIONS，所以伺服器需要允許該方法。
- 對於簡單請求，如GET，只需要在HTTP Response後新增Access-Control-Allow-Origin。
- 對於非簡單請求，比如POST、PUT、DELETE等，瀏覽器會分兩次應答。第一次preflight（method: OPTIONS），主要驗證來源是否合法，並返回允許的Header等。第二次才是真正的HTTP應答。所以伺服器必須處理OPTIONS應答。
注意：如上的 add_header 最後都可以加上了 always，它表示不管返回狀態碼是多少都會使 add_header 生效，有些時候服務端可能會返回 4XX 的狀態碼，這時候如果少了 always 會導致 add_header 失效，從而導致瀏覽器報跨域錯誤。
2.2 配置示例
方案1 *：萬用字元，全部允許，存在安全隱患(不推薦)。一旦啟用本方法，表示任何域名皆可直接跨域請求：
1 server { 2 ... 3 location / { 4 # 允許 所有頭部 所有域 所有方法 5 add_header 'Access-Control-Allow-Origin' '*'; 6 add_header 'Access-Control-Allow-Headers' '*'; 7 add_header 'Access-Control-Allow-Methods' '*'; 8 # OPTIONS 直接返回204 9 if ($request_method = 'OPTIONS') { 10 return 204; 11 } 12 } 13 ... 14 }
方案2：多域名配置(推薦)
配置多個域名在map中 只有配置過的允許跨域：
1 map $http_origin $corsHost { 2 default 0; 3 "~https://zzzmh.cn" https://zzzmh.cn; 4 "~https://chrome.zzzmh.cn" https://chrome.zzzmh.cn; 5 "~https://bz.zzzmh.cn" https://bz.zzzmh.cn; 6 } 7 server { 8 ... 9 location / { 10 # 允許 所有頭部 所有$corsHost域 所有方法 11 add_header 'Access-Control-Allow-Origin' $corsHost; 12 add_header 'Access-Control-Allow-Headers' '*'; 13 add_header 'Access-Control-Allow-Methods' '*'; 14 # OPTIONS 直接返回204 15 if ($request_method = 'OPTIONS') { 16 return 204; 17 } 18 } 19 ... 20 }
四、 其他更多示例
4.1 區分請求跨域一
1 server 2 { 3 listen 80; 4 server_name multireq01.linuxds.com; 5 root root /usr/share/nginx/multireq01; 6 access_log /var/log/nginx/multireq01.access.log main; 7 error_log /var/log/nginx/multireq01.error.log warn; 8 location / 9 { 10 if ($request_method = 'OPTIONS') { 11 add_header 'Access-Control-Allow-Origin' '*'; 12 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 13 add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; 14 add_header 'Access-Control-Max-Age' 1728000; 15 add_header 'Content-Type' 'text/plain charset=UTF-8'; 16 add_header 'Content-Length' 0; 17 return 204; 18 } 19 if ($request_method = 'POST') { 20 add_header 'Access-Control-Allow-Origin' '*'; 21 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 22 add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; 23 } 24 if ($request_method = 'GET') { 25 add_header 'Access-Control-Allow-Origin' '*'; 26 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 27 add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; 28 } 29 } 30 }
4.2 區分請求跨域二
1 server 2 { 3 listen 80; 4 server_name multireq02.linuxds.com; 5 root root /usr/share/nginx/multireq02; 6 access_log /var/log/nginx/multireq02.access.log main; 7 error_log /var/log/nginx/multireq02.error.log warn; 8 location / 9 { 10 if ($request_method = 'OPTIONS') { 11 add_header 'Access-Control-Allow-Origin' 'https://docs.domain.com'; 12 add_header 'Access-Control-Allow-Credentials' 'true'; 13 add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS'; 14 add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token'; 15 return 204; 16 } 17 if ($request_method = 'POST') { 18 add_header 'Access-Control-Allow-Origin' 'https://docs.domain.com'; 19 add_header 'Access-Control-Allow-Credentials' 'true'; 20 add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS'; 21 add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token'; 22 } 23 if ($request_method = 'GET') { 24 add_header 'Access-Control-Allow-Origin' 'https://docs.domain.com'; 25 add_header 'Access-Control-Allow-Credentials' 'true'; 26 add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS'; 27 add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token'; 28 } 29 } 30 }