CORS跨域請求

何爲跨域請求

若請求的url的協議、域名、端口中的任意一個與當前的url不一樣，即爲跨域請求。

跨域請求使得頁面體驗更好，但同時也帶來了安全隱患。常見的一種網絡攻擊叫CSRF(Cross-site request forgery)。它的攻擊原理大體以下：

1. 用戶訪問正常網站A，諸如某銀行，登陸進去，A生成cookie信息並返回給用戶的瀏覽器
2. 保持網站A的登陸狀態，在同一個瀏覽器窗口的新tab頁進入惡意網站B
3. B網站的惡意代碼被執行，要求跨域請求A網站的某些資源，諸如轉帳功能
4. 瀏覽器響應該請求，在用戶不知情的狀況下攜帶cookie信息，向A發出請求
5. 網站A根據用戶的cookie信息覈實用戶身份，處理該請求，那麼來自網站B的惡意請求被執行

CORS驗證機制

基於CSRF等安全隱患，瀏覽器會限制從腳本發出的跨域請求，雖然安全性更高，頁面體驗卻差了。因而W3C推出了一種跨域的訪問驗證的機制，即CORS，這種機制支持跨域請求，且跨站數據傳輸更安全。

CORS驗證機制須要客戶端和服務的協同處理。

客戶端處理機制

瀏覽器會對全部跨域請求進行驗證，分爲簡單請求驗證處理和預檢請求驗證處理。那麼對應的就有簡單請求和非簡單請求之分。

簡單請求

若一個請求同時知足如下兩個條件，那麼則爲簡單請求。

• 請求方法爲GET或HEAD或POST
• 請求頭中的Content-Type值爲application/x-www-form-urlencoded 或 multipart/form-data 或 text/plain

對於簡單請求，瀏覽器直接發送該請求，在同一個請求中做跨域驗證。怎麼驗證呢？在請求頭上附上Origin屬性，代表這是一個跨域請求。服務器接到請求，根據設定的跨域規則來驗證，驗證經過，返回Access-Control-Allow-Origin等以Access-Control-開頭的響應頭以及請求的資源，不然返回403狀態碼，且不會返回請求的資源。

非簡單請求

不爲簡單請求的跨域請求均爲非簡單請求。

非簡單請求的跨域驗證經過一個預檢請求來驗證，即在發送一個正式的跨域請求以前，發送一個預檢請求，用來檢查當前網頁所在的域名是否在服務器的許可名單中以及可以使用哪些請求方法，請求頭字段。

預檢請求

• 請求方法爲OPTIONS
• 請求頭字段包括 Origin, Access-Control-Request-Method(代表正式的跨域請求可能用到的方法)，Access-Control-Request-Headers(代表正式的跨域請求可能用到的頭字段)

若預檢請求經過驗證，則響應字段裏會包含以下字段：

Access-Control-Allow-Origin：值爲請求頭中的origin值或*

Access-Control-Allow-Methods: 代表可被支持的請求方法

Access-Control-Allow-Headers: 代表可被支持的頭信息字段

Access-Control-Allow-Credentials: 當請求要求攜帶證書信息（例如cookie,受權信息等）驗證，服務器端是否容許攜帶

Access-Control-Max-Age: 本次預檢請求的有效期，單位爲秒

若預檢請求沒經過驗證，則響應字段裏不會包含以Access-Control-開頭的響應字段，且不會發送正式的跨域請求

正式的跨域請求

與簡單請求同樣，請求頭中附帶Origin

攜帶證書信息的請求

通常狀況下，跨域請求不攜帶證書信息。但若請求的證書模式（credentials mode）被設爲include，那麼代表該請求須要攜帶證書信息。請求的證書模式可經過xmlHttpRequest.withCredentials = true設置或調用fetch([url],{mode:"include"})實現。

在簡單請求及正式的非簡單請求中，請求頭附帶證書信息，響應頭回應：Access-Control-Allow-Credentials：true，並返回請求資源。

在預檢請求中，請求頭並不會附帶證書，響應頭會迴應：Access-Control-Allow-Credentials:true。

有一點需注意：若服務器端贊成請求攜帶信息，則Access-Control-Allow-Origin不能爲*，只能爲請求頭中指定的Origin值。

服務器端機制

1. 檢查http頭部是否有Origin字段
2. 沒有或不容許，則看成普通請求處理，結束
3. 如有且容許跨源，再看是不是預檢請求（method爲OPTIONS）
4. 是預檢請求，返回Access-Control-Allow-Origin，Access-Control-Allow-Methods等信息，內容爲空
5. 不是預檢請求，返回Access-Control-Allow-Origin，Access-Control-Allow-Credentials等信息，內容爲請求的資源。