跨域資源共享 CORS

跨域資源共享（cross-origin resource sharing）是一種機制，它使用額外的 http 頭部告訴瀏覽器可以讓乙個web應用進行跨域資源請求。

若乙個請求同時滿足下述所有條件，則該請求可視為「簡單請求」（注：灰色字型內容了解即可）：

手動設定的頭部字段只能是（注意：也可以設定 forbidden header name 中的頭部字段，如connection、accept-encoding等，但是設定無效）

content-type的值只能為

cors 預檢請求發生在實際請求之前，用於檢查伺服器是否支援 cors，以判斷實際請求傳送是否安全。預檢請求使用的方式是options。

當乙個請求不是「簡單請求」時，即應該先傳送預檢請求，比如：

跨域請求，cors要求服務端設定一些頭部字段，最重要的乙個就是access-control-allow-origin。下面以案例進行說明，前端使用 axios 進行 http 傳輸，後端以 koa 作為服務端框架，並使用cors中介軟體 koa2-cors。

}複製**

// server http://localhost:3000
router.get('/api/******', ctx => ;
});複製**

http 報文：

http 請求頭部有個origin字段，表示請求來自**。http 響應頭部中的access-control-allow-origin表示哪個域可以訪問該資源。使用origin和access-control-allow-origin就完成了最簡單的訪問控制。

mainrequest() // 增加乙個自定義的頭部字段，觸發預檢請求

}).then(data => );

}複製**

// server http://localhost:3000
router.post('/api/mainrequest', ctx => ;
});複製**

預檢請求的報文：

請求首部字段access-control-request-method告知伺服器，實際請求將使用post方法。請求首部字段access-control-request-headers告知伺服器，實際請求將攜帶乙個自定義請求首部字段：x-test。伺服器據此決定，該實際請求是否被允許。

響應首部字段access-control-allow-methods表明伺服器允許客戶端使用哪些方法發起請求。響應首部字段access-control-allow-headers表明伺服器允許請求中攜帶字段 x-test。

實際請求的報文：

實際請求中傳送了x-test頭部字段，響應狀態碼 200 ok。

注意，以上請求頭部字段無須手動設定，當使用xmlhttprequest物件發起跨域請求時，它們已經被設定就緒。

如果想要訪問其他響應頭部資訊，則需要在伺服器端設定access-control-allow-headers。access-control-expose-headers讓伺服器把允許瀏覽器訪問的頭部字段放入白名單，比如：

access-control-expose-headers: x-my-custom-header, x-another-custom-header

複製**

這樣瀏覽器就能夠訪問到x-my-custom-header和x-another-custom-header響應頭部了。

access-control-max-age

access-control-max-age字段指定了預檢請求的結果能夠被快取多久，單位是秒，比如：

access-control-max-age: 5

複製**

表示在第一次預檢請求發出後，5s 內再訪問該介面時會直接傳送實際請求，而不需要先發預檢請求。過了 5s 後，會再要求先傳送預檢請求，以此類推。

cors()

);複製**

服務端設定了 5s 快取，實際請求如下：

注意，如果設定快取後，發現每次還是會傳送 options 請求，請檢查你是不是勾選了「禁止快取」。

access-control-allow-credentials

xmlhttprequest.withcredentials（或者request.credentials）表示跨域請求中，user agent 是否應該傳送 cookies、authorization headers 或者 tls client certificates 等憑據。access-control-allow-credentials的作用就是：當 credentials 為「真」時（xhr和fetch設定方式不一樣），access-control-allow-credentials告訴瀏覽器是否把響應內容暴露給前端 js **。比如：

);複製**此時，服務端未設定credentials: true，發起請求能看到客戶端報錯：

如果服務端設定了credentials: true則客戶端就不會報錯了。

預檢請求的時候，access-control-allow-credentials響應頭部字段表示實際請求中是否可以使用 credentials。

關於 cors 響應頭部欄位的運用，建議看一下 koa2-cors 中介軟體的原始碼。**只有幾十行，特別清晰易懂。

跨域資源共享 CORS

跨域資源共享 CORS

CORS 跨域資源共享

CORS 跨域資源共享

相關推薦