目錄
- 引子
- 簡介
- Request Header
- Response Header
- Preflight Request
- 參考資料
引子
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
通過列出其名稱，指示哪些頭部可以作為回應的一部分公開，
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 物件，
參考資料
- JavaScript高級程式設計（第3版）
- CORS protocol
- CORS MDN
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/159138.html
標籤：JavaScript
上一篇：reactNative性能優化