一 跨域概述
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環境預設
1 [root@nginx02 ~]# mkdir /usr/share/nginx/source01/ 2 [root@nginx02 ~]# echo '<h1>Source01</h1>' > /usr/share/nginx/source01/index.html
1 [root@nginx02 ~]# 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 [root@nginx02 ~]# nginx -t -c /etc/nginx/nginx.conf #檢查組態檔 2 [root@nginx02 ~]# nginx -s reload #多載組態檔
3.2 Nginx03環境預設
1 [root@nginx03 ~]# mkdir /usr/share/nginx/source02/ 2 [root@nginx03 ~]# echo '<h1>Source02</h1>' > /usr/share/nginx/source02/index.html
1 [root@nginx03 ~]# 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 [root@nginx03 ~]# nginx -t -c /etc/nginx/nginx.conf #檢查組態檔 2 [root@nginx03 ~]# nginx -s reload #多載組態檔
3.3 預備環境驗證
瀏覽器分別測驗訪問:

四 簡單請求跨域
4.1 單域名配置
場景:允許來自source01.odocker.com的應用在cors.linuxds.com上跨域提取資料,
1 [root@nginx01 ~]# mkdir /usr/share/nginx/corssingle/ 2 [root@nginx01 ~]# echo '<h1>Corssingle</h1>' > /usr/share/nginx/corssingle/index.html
1 [root@nginx01 ~]# 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 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf #檢查組態檔 2 [root@nginx01 ~]# nginx -s reload #多載組態檔
4.2 單域名確認驗證
[root@client ~]# 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 [root@nginx01 ~]# mkdir /usr/share/nginx/corsmulti01/ 2 [root@nginx01 ~]# echo '<h1>Corsmulti01</h1>' > /usr/share/nginx/corsmulti01/index.html
1 [root@nginx01 ~]# 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 }
1 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf #檢查組態檔 2 [root@nginx01 ~]# nginx -s reload #多載組態檔
4.4 方法一確認驗證
[root@client ~]# 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 [root@nginx01 ~]# mkdir /usr/share/nginx/corsmulti02/ 2 [root@nginx01 ~]# echo '<h1>Corsmulti02</h1>' > /usr/share/nginx/corsmulti02/index.html
1 [root@nginx01 ~]# 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 }
1 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf #檢查組態檔 2 [root@nginx01 ~]# nginx -s reload #多載組態檔
4.6 方法二確認驗證
[root@client ~]# curl -I -H "Origin: http://source01.odocker.com" http://corsmulti02.linuxds.com

瀏覽器訪問http://corsmulti02.linuxds.com/,略,
4.7 多域名配置方法三
場景:允許來自*.odocker.com的應用,即允許多個域名跨域訪問corsmulti03.linuxds.com上的資源,
1 [root@nginx01 ~]# mkdir /usr/share/nginx/corsmulti03/ 2 [root@nginx01 ~]# echo '<h1>Corsmulti03</h1>' > /usr/share/nginx/corsmulti03/index.html
1 [root@nginx01 ~]# 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 }
1 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf #檢查組態檔 2 [root@nginx01 ~]# nginx -s reload #多載組態檔
4.8 方法三確認驗證
[root@client ~]# 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 [root@nginx01 ~]# mkdir /usr/share/nginx/corscomplex/ 2 [root@nginx01 ~]# echo '<h1>Corscomplex</h1>' > /usr/share/nginx/corscomplex/index.html
1 [root@nginx01 ~]# 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 }
1 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf #檢查組態檔 2 [root@nginx01 ~]# nginx -s reload #多載組態檔
5.3 復雜請求確認驗證
1 [root@client ~]# curl -I -X OPTIONS -H "Origin: http://source01.odocker.com" http://corscomplex.linuxds.com 2 [root@client ~]# 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,
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/30510.html
標籤:Linux
上一篇:Shell腳本學習指南
