014.Nginx跨域配置

阿新 • • 發佈：2020-07-20

一跨域概述

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：配置 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     }

三跨域配置環境準備

3.1 Nginx02環境預設

主機	域名	備註
Nginx01	corssingle.linuxds.com corsmulti01.linuxds.com corsmulti02.linuxds.com corsmulti03.linuxds.com corsmulti04.linuxds.com	cors跨域伺服器，即需要配置允許跨域被訪問。
Nginx02	source01.odocker.com	訪問cors的伺服器01
Nginx03	source02.odocker.com	訪問cors的伺服器02

  1 [[email protected] ~]# mkdir /usr/share/nginx/source01/

  2 [[email protected] ~]# echo '<h1>Source01</h1>' > /usr/share/nginx/source01/index.html

  1 [[email protected] ~]# vi /etc/nginx/conf.d/source01.conf

  2 server {

  3     listen  80;							#監聽埠

  4     server_name  source01.odocker.com;				#配置虛擬主機名和IP

  5     location / {

  6         root   /usr/share/nginx/source01;			#請求匹配路徑

  7         index  index.html;					#指定主頁

  8         access_log  /var/log/nginx/source01.access.log  main;

  9         error_log   /var/log/nginx/source01.error.log  warn;

 10     }

 11 }

  1 [[email protected] ~]# nginx -t -c /etc/nginx/nginx.conf		#檢查配置檔案

  2 [[email protected] ~]# nginx -s reload				#過載配置檔案

3.2 Nginx03環境預設

  1 [[email protected] ~]# mkdir /usr/share/nginx/source02/

  2 [[email protected] ~]# echo '<h1>Source02</h1>' > /usr/share/nginx/source02/index.html

  1 [[email protected] ~]# vi /etc/nginx/conf.d/source02.conf

  2 server {

  3     listen  80;							#監聽埠

  4     server_name  source02.odocker.com;				#配置虛擬主機名和IP

  5     location / {

  6         root   /usr/share/nginx/source02;			#請求匹配路徑

  7         index  index.html;					#指定主頁

  8         access_log  /var/log/nginx/source02.access.log  main;

  9         error_log   /var/log/nginx/source02.error.log  warn;

 10     }

 11 }

  1 [[email protected] ~]# nginx -t -c /etc/nginx/nginx.conf		#檢查配置檔案

  2 [[email protected] ~]# nginx -s reload				#過載配置檔案

3.3 預備環境驗證

瀏覽器分別測試訪問：

四簡單請求跨域

4.1 單域名配置

場景：允許來自source01.odocker.com的應用在cors.linuxds.com上跨域提取資料。

  1 [[email protected] ~]# mkdir /usr/share/nginx/corssingle/

  2 [[email protected] ~]# echo '<h1>Corssingle</h1>' > /usr/share/nginx/corssingle/index.html

  1 [[email protected] ~]# vi /etc/nginx/conf.d/corssingle.conf

  2 server

  3 {

  4     listen 80;

  5     server_name corssingle.linuxds.com;

  6     location /

  7     {

  8         root   /usr/share/nginx/corssingle;

  9         index  index.html index.htm;

 10         access_log  /var/log/nginx/corssingle.access.log  main;

 11         error_log   /var/log/nginx/corssingle.error.log  warn;

 12         #proxy_pass http://source01.odocker.com;

 13         add_header 'Access-Control-Allow-Origin' 'http://source01.odocker.com';

 14         add_header 'Access-Control-Allow-Credentials' 'true';

 15         add_header 'Access-Control-Max-Age' 86400;

 16         add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';

 17         add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';

 18     }

 19 }

  1 [[email protected] ~]# nginx -t -c /etc/nginx/nginx.conf		#檢查配置檔案

  2 [[email protected] ~]# nginx -s reload				#過載配置檔案

4.2 單域名確認驗證

[[email protected] ~]# curl -I -H "Origin: http://source01.odocker.com" http://corssingle.linuxds.com

瀏覽器訪問http://corssingle.linuxds.com/。

4.3 多域名配置方法一

場景：允許來自source01.odocker.com和source02.odocker.com的應用，即允許多個域名跨域訪問corsmulti01.linuxds.com上的資源。

  1 [[email protected] ~]# mkdir /usr/share/nginx/corsmulti01/

  2 [[email protected] ~]# echo '<h1>Corsmulti01</h1>' > /usr/share/nginx/corsmulti01/index.html

  1 [[email protected] ~]# vi /etc/nginx/conf.d/corsmulti01.conf

  2 map $http_origin $corsHost {

  3     default 0;

  4     "~http://source01.odocker.com" http://source01.odocker.com;

  5     "~http://source02.odocker.com" http://source02.odocker.com;

  6 }

  7 server {

  8     listen 80;

  9     server_name corsmulti01.linuxds.com;

 10     location /

 11     {

 12         if ($request_method = 'OPTIONS') {

 13             return 204;

 14         }

 15         root   /usr/share/nginx/corsmulti01;

 16         index  index.html index.htm;

 17         access_log  /var/log/nginx/corsmulti01.access.log  main;

 18         error_log   /var/log/nginx/corsmulti01.error.log  warn;

 19

 20         add_header 'Access-Control-Allow-Origin' $corsHost;

 21         add_header 'Access-Control-Max-Age' 86400;

 22         add_header 'Access-Control-Allow-Credentials' 'true';

 23         add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';

 24         add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';

 25

 26     }

 27 }

4.4 方法一確認驗證

[[email protected] ~]# curl -I -H "Origin: http://source01.odocker.com" http://corsmulti01.linuxds.com

瀏覽器訪問http://corsmulti01.linuxds.com/。

4.5 多域名配置方法二

場景：允許來自localhostsource01.odocker.com或source02.odocker.com的應用，即允許多個域名跨域訪問corsmulti02.linuxds.com上的資源。

  1 [[email protected] ~]# mkdir /usr/share/nginx/corsmulti02/

  2 [[email protected] ~]# echo '<h1>Corsmulti02</h1>' > /usr/share/nginx/corsmulti02/index.html

  1 [[email protected] ~]# vi /etc/nginx/conf.d/corsmulti02.conf

  2 server {

  3     listen 80;

  4     server_name corsmulti02.linuxds.com;

  5     location /

  6     {

  7         root   /usr/share/nginx/corsmulti02;

  8         index  index.html index.htm;

  9         access_log  /var/log/nginx/corsmulti02.access.log  main;

 10         error_log   /var/log/nginx/corsmulti02.error.log  warn;

 11         set $cors '';

 12         if ($http_origin ~* 'https?://(localhost|source01\.odocker\.com|source01\.odocker\.com)') {

 13             set $cors 'true';

 14         }

 15

 16         if ($cors = 'true') {

 17             add_header 'Access-Control-Allow-Origin' "$http_origin";

 18             add_header 'Access-Control-Allow-Credentials' 'true';

 19             add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';

 20             add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';

 21         }

 22

 23         if ($request_method = 'OPTIONS') {

 24             return 204;

 25         }

 26     }

 27 }

4.6 方法二確認驗證

[[email protected] ~]# curl -I -H "Origin: http://source01.odocker.com" http://corsmulti02.linuxds.com

瀏覽器訪問http://corsmulti02.linuxds.com/，略。

4.7 多域名配置方法三

場景：允許來自*.odocker.com的應用，即允許多個域名跨域訪問corsmulti03.linuxds.com上的資源。

  1 [[email protected] ~]# mkdir /usr/share/nginx/corsmulti03/

  2 [[email protected] ~]# echo '<h1>Corsmulti03</h1>' > /usr/share/nginx/corsmulti03/index.html

  1 [[email protected] ~]# vi /etc/nginx/conf.d/corsmulti03.conf

  2 server {

  3     listen 80;

  4     server_name corsmulti03.linuxds.com;

  5     location /

  6     {

  7         root   /usr/share/nginx/corsmulti03;

  8         index  index.html index.htm;

  9         access_log  /var/log/nginx/corsmulti03.access.log  main;

 10         error_log   /var/log/nginx/corsmulti03.error.log  warn;

 11         if ( $http_origin ~ http://(.*).odocker.com){

 12             set $allow_url $http_origin;

 13         }

 14     	#CORS(Cross Orign Resource-Sharing)跨域控制配置

 15         add_header 'Access-Control-Allow-Credentials' 'true';	#是否允許請求帶有驗證資訊

 16         add_header 'Access-Control-Allow-Origin' "$allow_url";	#允許跨域訪問的域名,可以是一個域的列表，也可以是萬用字元*

 17         add_header 'Access-Control-Allow-Headers' 'x-requested-with,content-type,Cache-Control,Pragma,Date,x-timestamp';				#允許指令碼訪問的返回頭

 18         add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS,PUT,DELETE';	#允許使用的請求方法，以逗號隔開

 19         add_header 'Access-Control-Expose-Headers' 'WWW-Authenticate,Server-Authorization';							        #允許自定義的頭部，以逗號隔開,大小寫不敏感

 20         add_header P3P 'policyref="/w3c/p3p.xml", CP="NOI DSP PSAa OUR BUS IND ONL UNI COM NAV INT LOC"';						#P3P支援跨域cookie操作

 21     }

 22 }

4.8 方法二確認驗證

[[email protected] ~]# curl -I -H "Origin: http://source01.odocker.com" http://corsmulti03.linuxds.com

瀏覽器訪問http://corsmulti03.linuxds.com/。

五複雜請求跨域

5.1 複雜請求

預設Access-Control-Allow-Origin開啟跨域請求只支援GET、HEAD、POST、OPTIONS請求，使用DELETE發起跨域請求時，瀏覽器出於安全考慮會先發起OPTIONS請求，伺服器端接收到的請求方式就變成了OPTIONS，所以會導致伺服器的405 Method Not Allowed。

5.2 複雜請求配置

  1 [[email protected] ~]# mkdir /usr/share/nginx/corscomplex/

  2 [[email protected] ~]# echo '<h1>Corscomplex</h1>' > /usr/share/nginx/corscomplex/index.html

  1 [[email protected] ~]# vi /etc/nginx/conf.d/corscomplex.conf

  2 server

  3 {

  4     listen 80;

  5     server_name corscomplex.linuxds.com;

  6     location /

  7     {

  8         root   /usr/share/nginx/corscomplex;

  9         index  index.html index.htm;

 10         access_log  /var/log/nginx/corscomplex.access.log  main;

 11         error_log   /var/log/nginx/corscomplex.error.log  warn;

 12         #proxy_pass http://source01.odocker.com;

 13

 14         add_header Cache-Control private;

 15         add_header 'Access-Control-Allow-Origin' 'http://source01.odocker.com';

 16         add_header 'Access-Control-Allow-Credentials' 'true';

 17         add_header 'Access-Control-Max-Age' 86400;

 18         add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';

 19         add_header 'Access-Control-Allow-Headers' 'DNT,Content-Type,Cache-Control,User-Agent,Keep-Alive,Authorization,Accept,X-Mx-ReqToken,Origin,X-Requested-With,X-CustomHeader,If-Modified-Since,Cache-Control,If-Modified-Since';

 20         if ($request_method = 'OPTIONS') {

 21             add_header 'Access-Control-Allow-Origin' 'http://source01.odocker.com';

 22             add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE';

 23             return 204;

 24         }

 25     }

 26 }

5.3 複雜請求確認驗證

  1 [[email protected] ~]# curl -I -X OPTIONS -H "Origin: http://source01.odocker.com" http://corscomplex.linuxds.com

  2 [[email protected] ~]# curl -I -H "Origin: http://source01.odocker.com" http://corscomplex.linuxds.com

瀏覽器訪問http://corscomplex.linuxds.com/。

六其他更多示例

6.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 }

6.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 }

參考連結：https://www.hi-linux.com/posts/60405.html。