面試官：說說你對options請求的理解
什么是 options 請求
我們可以看下 MDN 中的一段描述：
★ HTTP 的 OPTIONS 方法 用于獲取目的資源所支持的通信選項(xiàng)?？蛻舳丝梢詫μ囟ǖ?URL 使用 OPTIONS 方法，也可以對整站（通過將 URL 設(shè)置為“*”）使用該方法。”
簡單來說，就是可以用 options 請求去嗅探某個(gè)請求在對應(yīng)的服務(wù)器中都支持哪種請求方法。
在前端中我們一般不會(huì)主動(dòng)發(fā)起這個(gè)請求，但是往往你可以看到瀏覽器中相同的請求發(fā)起了 2 次，如圖：
其實(shí)，這是因?yàn)樵诳缬虻那闆r下，在瀏覽器發(fā)起"復(fù)雜請求"時(shí)主動(dòng)發(fā)起的?？缬蚬蚕順?biāo)準(zhǔn)規(guī)范要求，對那些可能對服務(wù)器數(shù)據(jù)產(chǎn)生副作用的 HTTP 請求方法（特別是 GET 以外的 HTTP 請求，或者搭配某些 MIME 類型的 POST 請求），瀏覽器必須首先使用 OPTIONS 方法發(fā)起一個(gè)預(yù)檢請求（preflight request），從而獲知服務(wù)端是否允許該跨域請求。服務(wù)器確認(rèn)允許之后，才發(fā)起實(shí)際的 HTTP 請求。
簡單請求與復(fù)雜請求
某些請求不會(huì)觸發(fā) CORS 預(yù)檢請求，這樣的請求一般稱為"簡單請求",而會(huì)觸發(fā)預(yù)檢的請求則稱為"復(fù)雜請求"。
簡單請求
- 請求方法為GET、HEAD、POST時(shí)發(fā)的請求
- 人為設(shè)置了規(guī)范集合之內(nèi)的首部字段，如Accept/Accept-Language/Content-Language/Content-Type/DPR/Downlink/Save-Data/Viewport-Width/Width
- Content-Type 的值僅限于下列三者之一,即application/x-www-form-urlencoded、multipart/form-data、text/plain
- 請求中的任意 XMLHttpRequestUpload 對象均沒有注冊任何事件監(jiān)聽器；
- 請求中沒有使用 ReadableStream 對象。
復(fù)雜請求
- 使用了下面任一 HTTP 方法，PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH
- 人為設(shè)置了以下集合之外首部字段，即簡單請求外的字段
- Content-Type 的值不屬于下列之一，即application/x-www-form-urlencoded、multipart/form-data、text/plain
options 關(guān)鍵的請求頭字段
request header 的關(guān)鍵字段
| 關(guān)鍵字段 | 作用 |
|---|---|
| Access-Control-Request-Method | 告知服務(wù)器，實(shí)際請求將使用 POST 方法 |
| Access-Control-Request-Headers | 告知服務(wù)器，實(shí)際請求將攜帶的自定義請求首部字段 |
如：
- Access-Control-Request-Method: POST
- Access-Control-Request-Headers: X-PINGOTHER, Content-Type
response header 的關(guān)鍵字段
| 關(guān)鍵字段 | 作用 |
|---|---|
| Access-Control-Allow-Methods | 表明服務(wù)器允許客戶端使用什么方法發(fā)起請求 |
| Access-Control-Allow-Origin | 允許跨域請求的域名，如果要允許所有域名則設(shè)置為 * |
| Access-Control-Allow-Headers | 將實(shí)際請求所攜帶的首部字段告訴服務(wù)器 |
| Access-Control-Max-Age | 指定了預(yù)檢請求的結(jié)果能夠被緩存多久 |
Options 請求優(yōu)化
當(dāng)我們發(fā)起跨域請求時(shí)，如果是簡單請求，那么我們只會(huì)發(fā)出一次請求，但是如果是復(fù)雜請求則先發(fā)出 options 請求，用于確認(rèn)目標(biāo)資源是否支持跨域，然后瀏覽器會(huì)根據(jù)服務(wù)端響應(yīng)的 header 自動(dòng)處理剩余的請求，如果響應(yīng)支持跨域，則繼續(xù)發(fā)出正常請求，如果不支持，則在控制臺顯示錯(cuò)誤。
由此可見，當(dāng)觸發(fā)預(yù)檢時(shí)，跨域請求便會(huì)發(fā)送 2 次請求，既增加了請求數(shù)，也延遲了請求真正發(fā)起的時(shí)間，嚴(yán)重影響性能。
所以，我們可以優(yōu)化 Options 請求，主要有 2 種方法。
- 轉(zhuǎn)為簡單請求，如用 JSONP 做跨域請求
- 對 options 請求進(jìn)行緩存，服務(wù)器端設(shè)置 Access-Control-Max-Age 字段，那么當(dāng)?shù)谝淮握埱笤?URL 時(shí)會(huì)發(fā)出 OPTIONS 請求，瀏覽器會(huì)根據(jù)返回的 Access-Control-Max-Age 字段緩存該請求的 OPTIONS 預(yù)檢請求的響應(yīng)結(jié)果（具體緩存時(shí)間還取決于瀏覽器的支持的默認(rèn)最大值，取兩者最小值，一般為 10 分鐘）。在緩存有效期內(nèi)，該資源的請求（URL 和 header 字段都相同的情況下）不會(huì)再觸發(fā)預(yù)檢。（chrome 打開控制臺可以看到，當(dāng)服務(wù)器響應(yīng) Access-Control-Max-Age 時(shí)只有第一次請求會(huì)有預(yù)檢，后面不會(huì)了。注意要開啟緩存，去掉 disable cache 勾選。）
總結(jié)
options 請求就是預(yù)檢請求，可用于檢測服務(wù)器允許的 http 方法。當(dāng)發(fā)起跨域請求時(shí)，由于安全原因，觸發(fā)一定條件時(shí)瀏覽器會(huì)在正式請求之前自動(dòng)先發(fā)起 OPTIONS 請求，即 CORS 預(yù)檢請求，服務(wù)器若接受該跨域請求，瀏覽器才繼續(xù)發(fā)起正式請求。
