什么是 CORS？

CORS 全稱 Cross-Origin Resource Sharing，即跨域資源共享。

CORS 是一種基于 HTTP Header 的機(jī)制，該機(jī)制通過(guò)允許服務(wù)器標(biāo)示除了它自己以外的其它域。服務(wù)器端配合瀏覽器實(shí)現(xiàn) CORS 機(jī)制，可以突破瀏覽器對(duì)跨域資源訪問(wèn)的限制，實(shí)現(xiàn)跨域資源請(qǐng)求。

CORS 驗(yàn)證機(jī)制

CORS 的驗(yàn)證機(jī)制分兩種模式：簡(jiǎn)單請(qǐng)求和預(yù)檢請(qǐng)求。

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

簡(jiǎn)單請(qǐng)求模式下瀏覽器直接發(fā)送請(qǐng)求，并在請(qǐng)求頭中攜帶 Origin。 服務(wù)器端接到請(qǐng)求后，會(huì)根據(jù)自己的跨域規(guī)則，通過(guò)響應(yīng)頭 Access-Control-Allow-Origin 來(lái)返回驗(yàn)證結(jié)果。

請(qǐng)求滿足以下所有條件即為簡(jiǎn)單請(qǐng)求：

1. 請(qǐng)求方法

• GET

• POST

• HEAD

2. Content-Type 字段值

• text/plain

• multipart/form-data

• application/x-www-form-urlencoded

3. 手動(dòng)設(shè)置的 Header 字段只能為自定義字段和 Fetch 規(guī)范定義的 CORS 安全字段。

• Accept

• Accept-Language

• Content-Language

• Content-Type

• DPR

• Downlink

• Save-Data

• Viewport-Width

• Width

預(yù)檢請(qǐng)求

需要預(yù)檢的請(qǐng)求必須首先使用?OPTIONS?方法發(fā)起一個(gè)預(yù)檢請(qǐng)求到服務(wù)器，服務(wù)器基于預(yù)檢請(qǐng)求的信息來(lái)判斷是否接受接下來(lái)的實(shí)際請(qǐng)求。

預(yù)檢請(qǐng)求 Header：

• Access-Control-Request-Method

指明實(shí)際請(qǐng)求所使用的 HTTP 方法。

• Access-Control-Request-Headers

指明實(shí)際請(qǐng)求所攜帶的字段。

預(yù)檢響應(yīng) Header：

• Access-Control-Allow-Origin

指明允許訪問(wèn)的域。

• Access-Control-Allow-Methods

指明允許的 HTTP 請(qǐng)求方法。

• Access-Control-Allow-Headers

指明允許攜帶的字段。

• Access-Control-Max-Age

指明該響應(yīng)的有效時(shí)間，在有效時(shí)間內(nèi)，瀏覽器無(wú)須為同一請(qǐng)求再次發(fā)起預(yù)檢請(qǐng)求。

瀏覽器檢查預(yù)檢響應(yīng)信息，如果預(yù)檢通過(guò)就發(fā)送實(shí)際請(qǐng)求。

使用預(yù)檢請(qǐng)求可以避免跨域請(qǐng)求對(duì)服務(wù)器的數(shù)據(jù)產(chǎn)生未預(yù)期的影響。

HTTP Header

請(qǐng)求 Header

• Origin: <origin>

指明請(qǐng)求所在域。

• Access-Control-Request-Method: <method>

指明請(qǐng)求所使用的 HTTP 方法。

• Access-Control-Request-Headers: <field-name>[, <field-name>]*

指明請(qǐng)求所攜帶的字段。

響應(yīng) Header

• Access-Control-Allow-Origin: <origin> | *

origin 值指定了允許訪問(wèn)該資源的域，* 表示允許任意域的請(qǐng)求。

• Access-Control-Expose-Headers: <field-name>[, <field-name>]*

指明允許瀏覽器訪問(wèn)的字段。

• Access-Control-Max-Age: <delta-seconds>

指明該響應(yīng)的有效時(shí)間，在有效時(shí)間內(nèi)，瀏覽器無(wú)須為同一請(qǐng)求再次發(fā)起預(yù)檢請(qǐng)求。

了解更多，請(qǐng)點(diǎn)擊：https://www.bilibili.com/video/BV1mr4y1F7ad/

作者：StoneHui
鏈接：https://juejin.cn/post/6908931034226622471
來(lái)源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。