CORS 跨域原理

同源策略&跨域

什麼是 CORS？

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

CORS 是一種基於 HTTP Header 的機制，該機制經過容許服務器標示除了它本身之外的其它域。服務器端配合瀏覽器實現 CORS 機制，能夠突破瀏覽器對跨域資源訪問的限制，實現跨域資源請求。

CORS 驗證機制

CORS 的驗證機制分兩種模式：簡單請求和預檢請求。

簡單請求

簡單請求模式下瀏覽器直接發送請求，並在請求頭中攜帶 Origin。 服務器端接到請求後，會根據本身的跨域規則，經過響應頭 Access-Control-Allow-Origin 來返回驗證結果。

請求知足如下全部條件即爲簡單請求：

1. 請求方法
   • GET
   • POST
   • HEAD
2. Content-Type 字段值
   • text/plain
   • multipart/form-data
   • application/x-www-form-urlencoded
3. 手動設置的 Header 字段只能爲自定義字段和 Fetch 規範定義的 CORS 安全字段。
   • Accept
   • Accept-Language
   • Content-Language
   • Content-Type
   • DPR
   • Downlink
   • Save-Data
   • Viewport-Width
   • Width

預檢請求

須要預檢的請求必須首先使用 OPTIONS 方法發起一個預檢請求到服務器，服務器基於預檢請求的信息來判斷是否接受接下來的實際請求。

預檢請求 Header：

• Access-Control-Request-Method

指明實際請求所使用的 HTTP 方法。

• Access-Control-Request-Headers

指明實際請求所攜帶的字段。

預檢響應 Header：

• Access-Control-Allow-Origin

指明容許訪問的域。

• Access-Control-Allow-Methods

指明容許的 HTTP 請求方法。

• Access-Control-Allow-Headers

指明容許攜帶的字段。

• Access-Control-Max-Age

指明該響應的有效時間，在有效時間內，瀏覽器無須爲同一請求再次發起預檢請求。

瀏覽器檢查預檢響應信息，若是預檢經過就發送實際請求。

使用預檢請求能夠避免跨域請求對服務器的數據產生未預期的影響。

HTTP Header

請求 Header

• Origin: <origin>

指明請求所在域。

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

指明請求所使用的 HTTP 方法。

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

指明請求所攜帶的字段。

響應 Header

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

origin 值指定了容許訪問該資源的域，* 表示容許任意域的請求。

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

指明容許瀏覽器訪問的字段。

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

指明該響應的有效時間，在有效時間內，瀏覽器無須爲同一請求再次發起預檢請求。