跨域請求

兩種結果

· 一種 request 會收不到 response，因為 response 被瀏覽器攔截了，內容不告訴你

· 另一種請求會根本發不出去，因為瀏覽器不允許發出那樣的 request

simple 請求跨域

條件

1.

請求方法是以下3種方法

2.

o HEAD

o POST

o GET

3.

HTTP的頭資訊不超出以下幾種欄位

4.

o 只能有瀏覽器預設新增的 headers，以及一些 CORS 協議中默許的 headers 比如 Accept 等，更多被允許的 headers，可以看這裡

o Accept

o Accept-Language

o Content-Language

o Lase-Event-ID

o Content-Type: 只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

注：
一旦一個 request 是 simple request，那麼，儘管這個請求是跨域的，它也會被瀏覽器直接放行。但是，在 response 返回的時候，瀏覽器並不會把 response 直接交給你，而是去檢查這個 response 的 headers 中有沒有 Access-Control-Allow-Origin，以及這個 header 的 value 包含 request 發出的地址（也就是“域”）。如果兩個條件都滿足， response 會被返回給發出請求的程式；如果沒有這個 header 或者 value 不對， response 就會被攔截下來，因為在瀏覽器看來，這個 response 不屬於你（因為伺服器沒有明確允許你這個“域”來請求它）。如果你使用的是 chrome 瀏覽器，在 response 被攔截下來的時候，console 中會顯示一個錯誤。

preflight 請求跨域

1. 不是 GET，HEAD，POST 請求；比如是 PUT 請求

2. 包含一些非 CORS 協議默許的 headers，比如Authorization，X-Request-With 或者一些自定義的headers。

3. Content-Type 不是默許的那 3 種
註釋：

4. 瀏覽器傳送 preflight request（那個 OPTIONS 請求[2]）

5. 瀏覽器收到 preflight response（也就是剛剛那個 request 的返回）

6. 瀏覽器根據 preflight response 中的 Access-Control-Allow-Origin, Access-Control-Allow-Headers以及其他Access-Control-*類的headers 中的 value 來判斷網頁程式真正要發出的 request 是否符合要求

7.

如果這個 request 符合要求，request 被髮出，網頁程式可以收到正常的 response（如果不出網路通訊上的意外）；如果這個 request 被判定為不符合要求，這個 request 乾脆就不會被髮出。
以上這些步驟都是同步的，preflight request 和真正的request 是有先後順序的

8.

跨域時帶身資訊（Access-Control-Allow-Credentials）

9.

伺服器允許客戶端表明身份

10.

1. 將Access-Control-Allow-Credentials設定為true

三種預設的表明身份的方式是：

1. Cookie: 在 request 的 header 中 Cookie 這一項

2. Authorization: 在 request 的 header 中 Authorization 這一項

3. 使用了 TLS 證書

讓客戶端瀏覽器自動帶上身份資訊

在進行跨域請求時，瀏覽器預設不會帶上 cookie（這個 cookie 是針對目標域的 cookie，而不是原來“域”的 cookie），但是如果在構建 xhr 物件時，把XMLHttpRequest.withCredentials這個屬性設為 true，瀏覽器會自動幫你帶上目標域的cookie

CROS跨域請求設定，偏重前端