大家好，我是前端西瓜哥。

因?yàn)橥床呗?Cross-Origin Policy)的存在，瀏覽器在一個(gè)域名下發(fā)送另一個(gè)域名的 Ajax 請(qǐng)求時(shí)，返回的數(shù)據(jù)通常會(huì)被瀏覽器攔截，讓開發(fā)者無(wú)法拿到返回結(jié)果。

這里說 “通?！?，是因?yàn)闉g覽器額外提供了一種可以正常使用 Ajax 請(qǐng)求非同源域名接口的機(jī)制，也就是我們接下來要說的 跨源資源共享(CORS, Cross-Origin Resource Sharing)。

CORS 會(huì)在上圖中的第三步中發(fā)揮作用。

簡(jiǎn)單來說，就是請(qǐng)求 b.com 的 HTTP 響應(yīng)頭字段中的一些頭字段符合一定規(guī)則，返回?cái)?shù)據(jù)就不會(huì)被瀏覽器攔截，請(qǐng)求者能正常獲得返回?cái)?shù)據(jù)。

簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求是瀏覽器發(fā)出跨域請(qǐng)求的 兩種不同的請(qǐng)求方式，我們來了解一下。

簡(jiǎn)單請(qǐng)求

發(fā)送的請(qǐng)求符合下面的所有情況，就屬于簡(jiǎn)單請(qǐng)求。

• 請(qǐng)求方法為其中一種：GET、POST、HEAD。
• 除了瀏覽器自動(dòng)設(shè)置的字段(比如 Connection)，僅能人為設(shè)置請(qǐng)求頭字段 Accept、Accept-Language、Content-Language、Content-Type 這個(gè)集合內(nèi)的值。
• 請(qǐng)求頭字段 Content-Type 為其中一種：text/plain、 multipart/form-data、application/x-www-form-urlencoded。

(還有一些更多的瑣碎的細(xì)節(jié)，比如腳本設(shè)置、特定瀏覽器相關(guān)的，這里不展開，具體可以查閱官方文檔)

可能你會(huì)對(duì)這個(gè)規(guī)則的設(shè)計(jì)很感興趣，其實(shí)它是為了 向后兼容，兼容一些之前沒有 Ajax 時(shí)就可以發(fā)送的跨域請(qǐng)求，比如 form 元素能夠產(chǎn)生的請(qǐng)求。

點(diǎn)擊表單下的提交按鈕，頁(yè)面跳轉(zhuǎn)然后發(fā)送請(qǐng)求。這種寫法非常古老了，因?yàn)闀?huì)自動(dòng)跳轉(zhuǎn)頁(yè)面且不能拿到返回?cái)?shù)據(jù)執(zhí)行下一步的操作，實(shí)際開發(fā)基本上不會(huì)使用了

<form action="https://b.com/api/v1/book/get" method="get">
  <input type="text" name="name" value="clean code" />
  <input type="submit" value="提交"/>
</form>

CORS 機(jī)制下，HTTP 響應(yīng)頭字段需要使用頭字段

Access-Control-Allow-Origin，將它的值設(shè)置為：

• *：任意域名都允許跨域請(qǐng)求。
• <origin>：具體的域名，這里不能提供多個(gè)域名，只能提供一個(gè)域名。這也是可以理解的，通過強(qiáng)制要求防止黑客得到服務(wù)端設(shè)置的白名單域名。我們不應(yīng)該透露太多信息。服務(wù)端要實(shí)現(xiàn)跨域白名單功能，就需要根據(jù)請(qǐng)求頭字段中動(dòng)態(tài)返回該字段的值。

另外，如果請(qǐng)求中攜帶了身份信息，也就是 Cookie，不能使用 *，而需要指定具體域名。

這樣設(shè)置后，我們就能正常地拿到其他域名接口返回的數(shù)據(jù)了。

下面我們?cè)倏纯捶呛?jiǎn)單請(qǐng)求。

非簡(jiǎn)單請(qǐng)求

不符合簡(jiǎn)單請(qǐng)求規(guī)定條件的請(qǐng)求，就是 非簡(jiǎn)單請(qǐng)求。

對(duì)于簡(jiǎn)單請(qǐng)求，為了兼容，瀏覽器會(huì)直接將請(qǐng)求發(fā)出去。但非簡(jiǎn)單請(qǐng)求沒有兼容的需要，所以瀏覽器給它加上了嚴(yán)格的復(fù)雜機(jī)制。

在發(fā)出真正的請(qǐng)求前，瀏覽器會(huì)先發(fā)一個(gè) OPTION 請(qǐng)求來探探路，這個(gè)請(qǐng)求稱為 預(yù)檢請(qǐng)求(preflight)。

瀏覽器發(fā)送的請(qǐng)求，會(huì)額外帶下以下請(qǐng)求頭字段：

• Access-Control-Request-Method：該字段告知服務(wù)端接下來要發(fā)起真正跨域請(qǐng)求使用的 HTTP 方法。
• Access-Control-Request-Headers：該字段告知服務(wù)端，當(dāng)前請(qǐng)求使用的不符合簡(jiǎn)單請(qǐng)求規(guī)則的頭字段，比如使用 JSON 結(jié)構(gòu)來作為數(shù)據(jù)的格式，預(yù)檢請(qǐng)求就會(huì)帶上上 Access-Control-Request-Headers: content-type

下面是服務(wù)端的回合。

服務(wù)端拿到了足夠多的請(qǐng)求方信息，然后就可以考慮是否允許跨域了。

服務(wù)端的響應(yīng)頭字段可以攜帶上以下字段：

• Access-Control-Allow-Origin：用法同上一節(jié)的簡(jiǎn)單請(qǐng)求說明。
• Access-Control-Allow-Methods：可以發(fā)送的請(qǐng)求方法。如 POST, GET, OPTIONS。
• Access-Control-Allow-Headers：可以使用的頭字段，如 X-PINGOTHER, Content-Type
• Access-Control-Max-Age: 86400：緩存的有效時(shí)長(zhǎng)，單位為秒，設(shè)置后，在這段時(shí)間內(nèi)都可以免除預(yù)檢請(qǐng)求的發(fā)送。瀏覽器自身預(yù)設(shè)了一個(gè)最大緩存時(shí)間，防止返回的緩存時(shí)間過長(zhǎng)(比如好幾年)導(dǎo)致的安全問題。

瀏覽器拿到這些字段后，就會(huì)進(jìn)行對(duì)比，如果不符合規(guī)則，那么真正的跨域請(qǐng)求將不會(huì)發(fā)送。如果不符合，接下來就會(huì)發(fā)送真正的跨域請(qǐng)求。

需要注意的是，真正的請(qǐng)求和簡(jiǎn)單請(qǐng)求一樣，需要提供Access-Control-Allow-Origin 頭字段，否則依舊拿不到返回?cái)?shù)據(jù)。

結(jié)尾

CORS 真正的形態(tài)是非簡(jiǎn)單請(qǐng)求，它不會(huì)立即發(fā)送真正的請(qǐng)求，而是額外發(fā)送 OPTION 方法的預(yù)檢請(qǐng)求，讓服務(wù)端來決定是否允許即將發(fā)送的請(qǐng)求。

簡(jiǎn)單請(qǐng)求是向后兼容的妥協(xié)產(chǎn)物，它其實(shí)直接向目標(biāo)發(fā)起了真正請(qǐng)求，只是瀏覽器可能會(huì)將返回的數(shù)據(jù)攔截掉，如果響應(yīng)頭沒有設(shè)置正確的

Access-Control-Allow-Origin 的話。