CORS

引子

CORS 全稱 Cross-Origin Resource Sharing，跨源資源共享，是跨域的解決方案之一，裏面有很多的知識點，在此集中整理。

• Origin
• My GitHub

簡介

瀏覽器的同源策略是一個重要的安全機制，不一樣源的客戶端在沒有受權的狀況下，不可以訪問對方的資源。同源的定義是訪問連接的協議、域名和端口號均相同。在實際應用中，合理的跨域請求對於一些應用程序也很重要， CORS 標準定義了在訪問跨域資源時，瀏覽器與服務器應該如何溝通。CORS 的基本思想是使用 HTTP 頭部讓瀏覽器與服務器進行溝通，從而決定請求是否可以成功。

CORS 標準中新增了一組 HTTP 首部字段，用於瀏覽器和服務器之間溝通。在跨域請求中，在一些狀況下會有一個預檢請求（preflight request），是用來檢查是否容許這種類型的請求，這種請求使用 OPTIONS 方法。預檢請求的使用，能夠避免跨域請求對服務器的數據產生未預期的影響。接下來看看相關具體的內容。

Request Header

CORS 涉及如下的請求頭：

Origin

表示跨域請求或預請求來自哪裏。

Access-Control-Request-Method

在使用 OPTION 方法時會用到，表示對同一資源的未來跨域請求可能使用的方法。

Access-Control-Request-Headers

在使用 OPTION 方法時會用到，表示對統一資源未來跨域請求可能使用的請求頭部。

Response Header

CORS 涉及如下響應頭：

Access-Control-Allow-Origin

表示是否可以共享響應。若是服務器認爲請求能夠接受，就設置該頭部爲請求頭的 Origin 信息或者 * ；若是沒有這個頭部，或者這個頭部的信息跟請求的 Origin 信息不匹配，瀏覽器就會駁回請求。

Access-Control-Allow-Credentials

表示跨域請求是否提供憑據。默認狀況下，跨域請求不提供憑據，設置該頭部爲 true 時，表示對應的請求應該發送憑據。若是服務器的響應中沒有設置該頭部，但發送的請求中帶了憑據，瀏覽器會調用到 onerror 事件處理程序。若是是 fetch 請求，該值設置爲 include 。

Access-Control-Allow-Methods

表示跨域請求支持的方法。

Access-Control-Allow-Headers

表示跨域請求支持的頭部。

Access-Control-Max-Age

表示預請求能夠緩存多長時間，以秒爲單位。

Access-Control-Expose-Headers

經過列出其名稱，指示哪些頭部能夠做爲響應的一部分公開。

Preflight Request

上面有提到在必定條件下，會先觸發預檢請求，當請求知足下面任一條件時，就須要先發預檢請求：

• 使用 PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH 中任一方法。
• 人爲設置了對 CORS 安全的首部字段集合以外的首部字段，該集合在正式標準中包含 Accept、Accept-Language、Content-Language、Content-Type（還有額外限制）。
• Content-Type 的值不是 application/x-www-form-urlencoded、multipart/form-data、text/plain 其中之一。
• 請求中 XMLHttpRequestUpload 對象註冊了事件監聽器。
• 請求中使用了 ReadableStream 對象。

若是請求知足下面全部條件，就不會觸發預請求：

• 使用 GET、HEAD、POST 方法之一。
• 不得人爲設置對 CORS 安全的首部字段集合以外的首部字段，該集合在正式標準中包含 Accept、Accept-Language、Content-Language、Content-Type（還有額外限制）。
• Content-Type 的值僅限 application/x-www-form-urlencoded、multipart/form-data、text/plain 其中之一。
• 請求中 XMLHttpRequestUpload 對象沒有註冊任何事件監聽器。
• 請求中沒有使用了 ReadableStream 對象。

參考資料

• JavaScript高級程序設計（第3版）
• CORS protocol
• CORS MDN