轉(zhuǎn)載請(qǐng)注明出處，點(diǎn)擊此處可了解 StoneHui 更多信息

前置知識(shí)點(diǎn)： 同源策略 & 跨域

什么是 CORS？

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

CORS 是一種基于 HTTP Header 的機(jī)制，該機(jī)制通過允許服務(wù)器標(biāo)示除了它自己以外的其它域。服務(wù)器端配合瀏覽器實(shí)現(xiàn) CORS 機(jī)制，可以突破瀏覽器對(duì)跨域資源訪問的限制，實(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ī)則，通過響應(yīng)頭 Access-Control-Allow-Origin 來返回驗(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)求的信息來判斷是否接受接下來的實(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
  指明允許訪問的域。
• Access-Control-Allow-Methods
  指明允許的 HTTP 請(qǐng)求方法。
• Access-Control-Allow-Headers
  指明允許攜帶的字段。
• Access-Control-Max-Age
  指明該響應(yīng)的有效時(shí)間，在有效時(shí)間內(nèi)，瀏覽器無須為同一請(qǐng)求再次發(fā)起預(yù)檢請(qǐng)求。

瀏覽器檢查預(yù)檢響應(yīng)信息，如果預(yù)檢通過就發(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 值指定了允許訪問該資源的域，* 表示允許任意域的請(qǐng)求。
• Access-Control-Expose-Headers: <field-name>[, <field-name>]*
  指明允許瀏覽器訪問的字段。
• Access-Control-Max-Age: <delta-seconds>
  指明該響應(yīng)的有效時(shí)間，在有效時(shí)間內(nèi)，瀏覽器無須為同一請(qǐng)求再次發(fā)起預(yù)檢請(qǐng)求。