目錄 "引子" "簡介" "Request Header" "Response Header" "Preflight Request" "參考資料" 引子 全稱 Cross Origin Resource Sharing，跨源資源共用，是跨域的解決方案之一，裡面有不少的知識點，在此集中整理。 [Or ...
目錄
引子
CORS 全稱 Cross-Origin Resource Sharing，跨源資源共用，是跨域的解決方案之一，裡面有不少的知識點，在此集中整理。
簡介
瀏覽器的同源策略是一個重要的安全機制，不同源的客戶端在沒有授權的情況下，不能夠訪問對方的資源。同源的定義是訪問鏈接的協議、功能變數名稱和埠號均相同。在實際應用中，合理的跨域請求對於一些應用程式也很重要， 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
通過列出其名稱，指示哪些頭部可以作為響應的一部分公開。
Back to topPreflight 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 對象。
