什麼是簡單請求和複雜請求

> 幾個問題：
1. 什麼是跨域？
2. 爲何會有跨域？
3. 如何處理跨域

咱們在平常的開發中，常常會遇到跨域資源共享，或者進行跨域接口訪問的狀況。跨域資源共享（ CORS）機制容許 Web 應用服務器進行跨域訪問控制。

跨域資源共享標準新增了一組 HTTP 首部字段，容許服務器聲明哪些源站經過瀏覽器有權限訪問哪些資源。另外，規範要求，對那些可能對服務器數據產生反作用的 HTTP 請求方法（特別是 GET之外的 HTTP 請求，或者搭配某些 MIME 類型的 POST請求），瀏覽器必須首先使用 OPTIONS方法發起一個預檢請求（preflight request），從而獲知服務端是否容許該跨域請求。服務器確認容許以後，才發起實際的 HTTP 請求。在預檢請求的返回中，服務器端也能夠通知客戶端，是否須要攜帶身份憑證（包括 Cookies和 HTTP 認證相關數據）。

在涉及到CORS的請求中，咱們會把請求分爲簡單請求和複雜請求。

簡單請求

知足如下條件的請求即爲簡單請求：

• 請求方法：GET、POST、HEAD

• 除了如下的請求頭字段以外，沒有自定義的請求頭

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width

• Content-Type的值只有如下三種(Content-Type通常是指在post請求中，get請求中設置沒有實際意義)

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

• 請求中的任意XMLHttpRequestUpload 對象均沒有註冊任何事件監聽器 (未驗證)

  • XMLHttpRequestUpload 對象可使用 XMLHttpRequest.upload 屬性訪問
• 請求中沒有使用 ReadableStream 對象 (未驗證)

複雜請求

非簡單請求即爲複雜請求。複雜請求咱們也能夠稱之爲在實際進行請求以前，須要發起預檢請求的請求。

簡單請求與複雜請求的跨域設置

針對簡單請求，在進行CORS設置的時候，咱們只須要設置

Access-Control-Allow-Origin:*
// 若是隻是針對某一個請求源進行設置的話，能夠設置爲具體的值
Access-Control-Allow-Origin: 'http://www.yourwebsite.com'

針對複雜請求，咱們須要設置不一樣的響應頭。由於在預檢請求的時候會攜帶相應的請求頭信息

Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-CUSTOMER-HEADER, Content-Type

相應的響應頭信息爲：

Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
// 設置max age，瀏覽器端會進行緩存。沒有過時以前真對同一個請求只會發送一次預檢請求
Access-Control-Max-Age: 86400

若是發送的預檢請求被進行了重定向，那大多數的瀏覽器都不支持對預檢請求的重定向。咱們能夠經過先發送一個簡單請求的方式，獲取到重定向的url XHR.responseURL，而後再去請求這個url。

附帶身份憑證的請求

通常而言，對於跨域 XMLHttpRequest或 Fetch 請求，瀏覽器不會發送身份憑證信息。若是要發送憑證信息，須要設置 XMLHttpRequest 的某個特殊標誌位。
若是在發送請求的時候，給xhr 設置了withCredentials爲true，從而向服務器發送 Cookies，若是服務端須要想客戶端也發送cookie的狀況，須要服務器端也返回Access-Control-Allow-Credentials: true響應頭信息。

對於附帶身份憑證的請求，服務器不得設置 Access-Control-Allow-Origin的值爲「*」。

這是由於請求的首部中攜帶了Cookie信息，若是 Access-Control-Allow-Origin的值爲「*」，請求將會失敗。而將 Access-Control-Allow-Origin的值設置爲 http://foo.example（請求源），則請求將成功執行。