cors跨域_Nginx通过CORS配置实现跨域访问
什么是跨域
跨域是指跨域名的訪問(wèn),以下情況都屬于跨域:
| 域名不同 | www.jd.com 與 www.taobao.com |
| 域名相同,端口不同 | www.jd.com:8080 與 www.jd.com:8081 |
| 二級(jí)域名不同 | item.jd.com 與 miaosha.jd.com |
如果域名和端口都相同,但是請(qǐng)求路徑不同,不屬于跨域,如:
www.jd.com/item
www.jd.com/goods
為什么有跨域問(wèn)題?
跨域不一定會(huì)有跨域問(wèn)題。
因?yàn)榭缬騿?wèn)題是瀏覽器對(duì)于ajax請(qǐng)求的一種安全限制:一個(gè)頁(yè)面發(fā)起的ajax請(qǐng)求,只能是與當(dāng)前頁(yè)同域名的路徑,這能有效的阻止跨站攻擊。
因此:跨域問(wèn)題 是針對(duì)ajax的一種限制。
但是這卻給我們的開(kāi)發(fā)帶來(lái)了不變,而且在實(shí)際生成環(huán)境中,肯定會(huì)有很多臺(tái)服務(wù)器之間交互,地址和端口都可能不同,怎么辦?
解決跨域問(wèn)題的方案:
目前比較常用的跨域解決方案有3種:
1.Jsonp
最早的解決方案,利用script標(biāo)簽可以跨域的原理實(shí)現(xiàn)。
限制:
1)需要服務(wù)的支持
2)只能發(fā)起GET請(qǐng)求
2.nginx反向代理
思路:
利用nginx反向代理把跨域?yàn)椴豢缬?#xff0c;支持各種請(qǐng)求方式
缺點(diǎn):需要在nginx進(jìn)行額外配置,語(yǔ)義不清晰
3.CORS
規(guī)范化的跨域請(qǐng)求解決方案,安全可靠。
優(yōu)勢(shì):
1)在服務(wù)端進(jìn)行控制是否允許跨域,可自定義規(guī)則
2)支持各種請(qǐng)求方式
缺點(diǎn):
1)會(huì)產(chǎn)生額外的請(qǐng)求
2)在服務(wù)端進(jìn)行控制是否允許跨域,可自定義規(guī)則
3)支持各種請(qǐng)求方式
今天我們會(huì)用cors的跨域方案。
什么是cors
CORS是一個(gè)W3C標(biāo)準(zhǔn),全稱(chēng)是"跨域資源共享"(Cross-origin resource sharing)。
它允許瀏覽器向跨源服務(wù)器,發(fā)出XMLHttpRequest請(qǐng)求,從而克服了AJAX只能同源使用的限制。
CORS需要瀏覽器和服務(wù)器同時(shí)支持。目前,所有瀏覽器都支持該功能,IE瀏覽器不能低于IE10。
瀏覽器端:
目前,所有瀏覽器都支持該功能(IE10以下不行)。整個(gè)CORS通信過(guò)程,都是瀏覽器自動(dòng)完成,不需要用戶(hù)參與。
服務(wù)端:
CORS通信與AJAX沒(méi)有任何差別,因此你不需要改變以前的業(yè)務(wù)邏輯。只不過(guò),瀏覽器會(huì)在請(qǐng)求中攜帶一些頭信息,我們需要以此判斷是否運(yùn)行其跨域,然后在響應(yīng)頭中加入一些信息即可。這一般通過(guò)過(guò)濾器完成即可。
原理有點(diǎn)復(fù)雜
瀏覽器會(huì)將所有請(qǐng)求分為兩類(lèi),其處理方案略有差異:簡(jiǎn)單請(qǐng)求、特殊請(qǐng)求。
簡(jiǎn)單請(qǐng)求
只要同時(shí)滿(mǎn)足以下兩大條件,就屬于簡(jiǎn)單請(qǐng)求。
(1) 請(qǐng)求方法是以下三種方法之一:
HEAD
GET
POST
(2)HTTP的頭信息不超出以下幾種字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三個(gè)值application/x-www-form-urlencoded、multipart/form-data、text/plain
當(dāng)瀏覽器發(fā)現(xiàn)發(fā)現(xiàn)請(qǐng)求是簡(jiǎn)單請(qǐng)求時(shí),會(huì)在請(qǐng)求頭中攜帶一個(gè)字段:Origin.
Origin
Origin中會(huì)指出當(dāng)前請(qǐng)求屬于哪個(gè)域(協(xié)議+域名+端口)。服務(wù)會(huì)根據(jù)這個(gè)值決定是否同意本次請(qǐng)求,也就是否允許其跨域。
如果服務(wù)器允許跨域,需要在返回的響應(yīng)頭中攜帶下面信息:
Access-Control-Allow-Origin: http://www.jd.comAccess-Control-Allow-Credentials: trueContent-Type: text/html; charset=utf-8Access-Control-Allow-Origin:可接受的域,是一個(gè)具體域名或者*,代表任意
Access-Control-Allow-Credentials:是否允許攜帶cookie,默認(rèn)情況下,cors不會(huì)攜帶cookie,除非這個(gè)值是true
注意:
如果跨域請(qǐng)求要想操作cookie,需要滿(mǎn)足3個(gè)條件:
服務(wù)的響應(yīng)頭中需要攜帶Access-Control-Allow-Credentials并且為true。
瀏覽器發(fā)起請(qǐng)求需要指定withCredentials 為true
響應(yīng)頭中的Access-Control-Allow-Origin一定不能為*,必須是指定的域名
特殊請(qǐng)求
不符合簡(jiǎn)單請(qǐng)求的條件,會(huì)被瀏覽器判定為特殊請(qǐng)求,比如請(qǐng)求方法是PUT或DELETE,或者Content-Type字段的類(lèi)型是application/json。。
特殊請(qǐng)求的CORS請(qǐng)求,會(huì)在正式通信之前,增加一次HTTP查詢(xún)請(qǐng)求,稱(chēng)為"預(yù)檢"請(qǐng)求(preflight)。
預(yù)檢請(qǐng)求
瀏覽器先詢(xún)問(wèn)服務(wù)器,當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中,以及可以使用哪些HTTP動(dòng)詞和頭信息字段。只有得到肯定答復(fù),瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求,否則就報(bào)錯(cuò)。
一個(gè)“預(yù)檢”請(qǐng)求的Demo:
OPTIONS /cors HTTP/1.1Origin: http://www.jd.comAccess-Control-Request-Method: PUTAccess-Control-Request-Headers: X-Custom-HeaderHost: api.jd.comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0...上面代碼中,你會(huì)發(fā)現(xiàn)多了一個(gè)自定義頭信息X-Custom-Header。
加上這個(gè),瀏覽器就會(huì)自動(dòng)識(shí)別為特殊請(qǐng)求,就自動(dòng)發(fā)出一個(gè)"預(yù)檢"請(qǐng)求,要求服務(wù)器確認(rèn)可以這樣請(qǐng)求。
與簡(jiǎn)單請(qǐng)求相比,除了Origin以外,多了兩個(gè)頭:
Access-Control-Request-Method:接下來(lái)會(huì)用到的請(qǐng)求方式,比如PUT
Access-Control-Request-Headers:會(huì)額外用到的頭信息
預(yù)檢請(qǐng)求的響應(yīng)
服務(wù)器收到預(yù)檢請(qǐng)求,檢查了多出的兩個(gè)字段后,如果許可跨域,會(huì)發(fā)出響應(yīng):
HTTP/1.1 200 OKDate: Tue,?14?Jul?2020?08:58:25?GMTAccess-Control-Allow-Origi: ?http://www.jd.comAccess-Control-Allow-Credential: ?trueAccess-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: X-Custom-HeaderAccess-Control-Max-Age: 1728000Content-Type: text/html; charset=utf-8Content-Encoding: gzipContent-Length: 0Keep-Alive: timeout=2, max=100Connection: Keep-AliveContent-Type: text/plain除了Access-Control-Allow-Origin和Access-Control-Allow-Credentials以外,這里又額外多出3個(gè)頭:
Access-Control-Allow-Methods:允許訪問(wèn)的方式
Access-Control-Allow-Headers:允許攜帶的頭
Access-Control-Max-Age:本次許可的有效時(shí)長(zhǎng),單位是秒,過(guò)期之前的ajax請(qǐng)求就無(wú)需再次進(jìn)行預(yù)檢了
如果瀏覽器得到上述響應(yīng),則認(rèn)定為可以跨域,后續(xù)就跟簡(jiǎn)單請(qǐng)求的處理是一樣的了。
與JSONP的比較
CORS與JSONP的使用目的相同,但是比JSONP更強(qiáng)大。
但是JSONP只支持GET請(qǐng)求。
CORS支持所有類(lèi)型的HTTP請(qǐng)求。
JSONP的優(yōu)勢(shì)在于支持老式瀏覽器,以及可以向不支持CORS的網(wǎng)站請(qǐng)求數(shù)據(jù)。
(本期主題)
對(duì)于簡(jiǎn)單請(qǐng)求來(lái)說(shuō):
if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';????add_header?'Access-Control-Expose-Headers'?'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';?}上面的配置中:
Access-Control-Allow-Origin:
必須配置的字段,'*'表示接受任意域名的請(qǐng)求,也可以指定接受某一個(gè)域名的請(qǐng)求
Access-Control-Request-Headers:
如果瀏覽器請(qǐng)求包括Access-Control-Request-Headers字段,則在Nginx配置中也是必須的,是一個(gè)由逗號(hào)分隔的字符串
Access-Control-Expose-Headers:
可選配字段。CORS請(qǐng)求,
XMLHttpRequest對(duì)象的getResponseHeader()方法只能拿到6個(gè)基本字段:
Cache-Control、
Content-Language、
Content-Type、
Expires、
Last-Modified、
Pragma。
如果想拿到其他字段,就必須在Access-Control-Expose-Headers里面指定。
上面的例子指定,
getResponseHeader('FooBar')可以返回FooBar字段的值
非簡(jiǎn)單請(qǐng)求是那種對(duì)服務(wù)器有特殊要求的請(qǐng)求,比如請(qǐng)求方法是PUT或DELETE,或者Content-Type字段的類(lèi)型是application/json。非簡(jiǎn)單請(qǐng)求的CORS請(qǐng)求,會(huì)在正式通信之前,增加一次HTTP查詢(xún)請(qǐng)求,稱(chēng)為"預(yù)檢"請(qǐng)求(preflight)。
瀏覽器先詢(xún)問(wèn)服務(wù)器,當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中,以及可以使用哪些HTTP動(dòng)詞和頭信息字段。只有得到肯定答復(fù),瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求,否則就報(bào)錯(cuò)。
if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 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; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 204;?}Access-Control-Request-Method:
該字段是必須的,用來(lái)列出瀏覽器的CORS請(qǐng)求會(huì)用到哪些HTTP方法?
Access-Control-Max-Age:
用來(lái)指定本次預(yù)檢請(qǐng)求的有效期,單位為秒其他參數(shù)參考簡(jiǎn)單請(qǐng)求即可
重啟即可。
遇到的問(wèn)題場(chǎng)景:在不同源的資源不能在當(dāng)前域名下顯示、調(diào)用。因?yàn)榭缬颉榱私鉀Q問(wèn)題,所以這篇文章出來(lái)了。
參考文章:
《CORS on Nginx》:
https://enable-cors.org/server_nginx.html
與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證,附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的cors跨域_Nginx通过CORS配置实现跨域访问的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: html页面源码_整合SpringMVC
- 下一篇: mysql某个值连续出现的记录_MySQ