簡單請求和複雜請求

簡單請求與複雜請求的概念

在涉及到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

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

預檢請求(OPTIONS請求)

爲何要發預檢請求

咱們都知道瀏覽器的同源策略，就是出於安全考慮，瀏覽器會限制從腳本發起的跨域HTTP請求，像XMLHttpRequest和Fetch都遵循同源策略。
瀏覽器限制跨域請求通常有兩種方式：

1. 瀏覽器限制發起跨域請求
2. 跨域請求能夠正常發起，可是返回的結果被瀏覽器攔截了

通常瀏覽器都是第二種方式限制跨域請求，那就是說請求已到達服務器，並有可能對數據庫裏的數據進行了操做，可是返回的結果被瀏覽器攔截了，那麼咱們就獲取不到返回結果，這是一次失敗的請求，可是可能對數據庫裏的數據產生了影響。
爲了防止這種狀況的發生，規範要求，對這種可能對服務器數據產生反作用的HTTP請求方法，瀏覽器必須先使用OPTIONS方法發起一個預檢請求，從而獲知服務器是否容許該跨域請求：若是容許，就發送帶數據的真實請求；若是不容許，則阻止發送帶數據的真實請求。

預檢請求的特殊性

1、OPTIONS不會攜帶請求參數和cookie,也不會對服務器數據產生反作用

2、Access-Control-Request-Method和Access-Control-Request-Headers

//預檢請求請求頭
OPTIONS /resources/post-here/ HTTP/1.1
Host: bar.other
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

首部字段 Access-Control-Request-Method 告知服務器，實際請求將使用 POST 方法。首部字段 Access-Control-Request-Headers 告知服務器，實際請求將攜帶兩個自定義請求首部字段：X-PINGOTHER 與 Content-Type。服務器據此決定，該實際請求是否被容許。

3、OPTIONS請求響應頭

響應頭
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

首部字段 Access-Control-Allow-Methods 代表服務器容許客戶端使用 POST,GET 和 OPTIONS 方法發起請求。

首部字段Access-Control-Allow-Headers 代表服務器容許請求中攜帶字段X-PINGOTHER 與Content-Type。與 Access-Control-Allow-Methods同樣，Access-Control-Allow-Headers的值爲逗號分割的列表。

最後，首部字段

Access-Control-Max-Age 代表該響應的有效時間爲 86400 秒，也就是 24 小時。在有效時間內，瀏覽器無須爲同一請求再次發起預檢請求。請注意，瀏覽器自身維護了一個最大有效時間，若是該首部字段的值超過了最大有效時間，將不會生效。
預檢請求完成以後，發送實際請求