面試官：說說你對 options 請求的理解

什麼是 options 請求

咱們能夠看下 MDN 中的一段描述：

★

HTTP 的 OPTIONS 方法 用於獲取目的資源所支持的通訊選項。客戶端能夠對特定的 URL 使用 OPTIONS 方法，也能夠對整站（經過將 URL 設置爲「*」）使用該方法。

」

簡單來講，就是能夠用 options 請求去嗅探某個請求在對應的服務器中都支持哪一種請求方法。

在前端中咱們通常不會主動發起這個請求，可是每每你能夠看到瀏覽器中相同的請求發起了 2 次，如圖：

其實，這是由於在跨域的狀況下，在瀏覽器發起"複雜請求"時主動發起的。跨域共享標準規範要求，對那些可能對服務器數據產生反作用的 HTTP 請求方法（特別是 GET 之外的 HTTP 請求，或者搭配某些 MIME 類型的 POST 請求），瀏覽器必須首先使用 OPTIONS 方法發起一個預檢請求（preflight request），從而獲知服務端是否容許該跨域請求。服務器確認容許以後，才發起實際的 HTTP 請求。

簡單請求與複雜請求

某些請求不會觸發 CORS 預檢請求，這樣的請求通常稱爲"簡單請求",而會觸發預檢的請求則稱爲"複雜請求"。

簡單請求

• 請求方法爲GET、HEAD、POST時發的請求
• 人爲設置了規範集合以內的首部字段，如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 對象均沒有註冊任何事件監聽器；
• 請求中沒有使用 ReadableStream 對象。

複雜請求

• 使用了下面任一 HTTP 方法，PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH
• 人爲設置瞭如下集合以外首部字段，即簡單請求外的字段
• Content-Type 的值不屬於下列之一，即application/x-www-form-urlencoded、multipart/form-data、text/plain

options 關鍵的請求頭字段

request header 的關鍵字段

關鍵字段	做用
Access-Control-Request-Method	告知服務器，實際請求將使用 POST 方法
Access-Control-Request-Headers	告知服務器，實際請求將攜帶的自定義請求首部字段

如：

Access-Control-Request-Method: POSTAccess-Control-Request-Headers: X-PINGOTHER, Content-Type

response header 的關鍵字段

關鍵字段	做用
Access-Control-Allow-Methods	代表服務器容許客戶端使用什麼方法發起請求
Access-Control-Allow-Origin	容許跨域請求的域名，若是要容許全部域名則設置爲 *
Access-Control-Allow-Headers	將實際請求所攜帶的首部字段告訴服務器
Access-Control-Max-Age	指定了預檢請求的結果可以被緩存多久

Options 請求優化

當咱們發起跨域請求時，若是是簡單請求，那麼咱們只會發出一次請求，可是若是是複雜請求則先發出 options 請求，用於確認目標資源是否支持跨域，而後瀏覽器會根據服務端響應的 header 自動處理剩餘的請求，若是響應支持跨域，則繼續發出正常請求，若是不支持，則在控制檯顯示錯誤。

因而可知，當觸發預檢時，跨域請求便會發送 2 次請求，既增長了請求數，也延遲了請求真正發起的時間，嚴重影響性能。

因此，咱們能夠優化 Options 請求，主要有 2 種方法。

1. 轉爲簡單請求，如用 JSONP 作跨域請求
2. 對 options 請求進行緩存，服務器端設置 Access-Control-Max-Age 字段，那麼當第一次請求該 URL 時會發出 OPTIONS 請求，瀏覽器會根據返回的 Access-Control-Max-Age 字段緩存該請求的 OPTIONS 預檢請求的響應結果（具體緩存時間還取決於瀏覽器的支持的默認最大值，取二者最小值，通常爲 10 分鐘）。在緩存有效期內，該資源的請求（URL 和 header 字段都相同的狀況下）不會再觸發預檢。（chrome 打開控制檯能夠看到，當服務器響應 Access-Control-Max-Age 時只有第一次請求會有預檢，後面不會了。注意要開啓緩存，去掉 disable cache 勾選。）

總結

options 請求就是預檢請求，可用於檢測服務器容許的 http 方法。當發起跨域請求時，因爲安全緣由，觸發必定條件時瀏覽器會在正式請求以前自動先發起 OPTIONS 請求，即 CORS 預檢請求，服務器若接受該跨域請求，瀏覽器才繼續發起正式請求。

參考資料

• https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

• https://zhuanlan.zhihu.com/p/70032617

最後

• 歡迎加我微信(winty230)，拉你進技術羣，長期交流學習...
  

• 歡迎關注「前端Q」,認真學前端，作個專業的技術人...