這篇文章主要介紹“怎么理解options請(qǐng)求”，在日常操作中，相信很多人在怎么理解options請(qǐng)求問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么理解options請(qǐng)求”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)長(zhǎng)期為成百上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為個(gè)舊企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)，個(gè)舊網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

什么是 options 請(qǐng)求

我們可以看下 MDN 中的一段描述：

  ★    HTTP 的 OPTIONS 方法 用于獲取目的資源所支持的通信選項(xiàng)?？蛻舳丝梢詫?duì)特定的 URL 使用 OPTIONS 方法，也可以對(duì)整站（通過將 URL 設(shè)置為“*”）使用該方法。”

簡(jiǎn)單來說，就是可以用 options 請(qǐng)求去嗅探某個(gè)請(qǐng)求在對(duì)應(yīng)的服務(wù)器中都支持哪種請(qǐng)求方法。

在前端中我們一般不會(huì)主動(dòng)發(fā)起這個(gè)請(qǐng)求，但是往往你可以看到瀏覽器中相同的請(qǐng)求發(fā)起了 2 次，如圖：

其實(shí)，這是因?yàn)樵诳缬虻那闆r下，在瀏覽器發(fā)起"復(fù)雜請(qǐng)求"時(shí)主動(dòng)發(fā)起的。跨域共享標(biāo)準(zhǔn)規(guī)范要求，對(duì)那些可能對(duì)服務(wù)器數(shù)據(jù)產(chǎn)生副作用的 HTTP 請(qǐng)求方法（特別是 GET 以外的 HTTP 請(qǐng)求，或者搭配某些 MIME 類型的 POST 請(qǐng)求），瀏覽器必須首先使用 OPTIONS 方法發(fā)起一個(gè)預(yù)檢請(qǐng)求（preflight request），從而獲知服務(wù)端是否允許該跨域請(qǐng)求。服務(wù)器確認(rèn)允許之后，才發(fā)起實(shí)際的 HTTP 請(qǐng)求。

簡(jiǎn)單請(qǐng)求與復(fù)雜請(qǐng)求

某些請(qǐng)求不會(huì)觸發(fā) CORS 預(yù)檢請(qǐng)求，這樣的請(qǐng)求一般稱為"簡(jiǎn)單請(qǐng)求",而會(huì)觸發(fā)預(yù)檢的請(qǐng)求則稱為"復(fù)雜請(qǐng)求"。

簡(jiǎn)單請(qǐng)求

•  請(qǐng)求方法為GET、HEAD、POST時(shí)發(fā)的請(qǐng)求

•  人為設(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

•  請(qǐng)求中的任意 XMLHttpRequestUpload 對(duì)象均沒有注冊(cè)任何事件監(jiān)聽器；

•  請(qǐng)求中沒有使用 ReadableStream 對(duì)象。

復(fù)雜請(qǐng)求

•  使用了下面任一 HTTP 方法，PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH

•  人為設(shè)置了以下集合之外首部字段，即簡(jiǎn)單請(qǐng)求外的字段

•  Content-Type 的值不屬于下列之一，即application/x-www-form-urlencoded、multipart/form-data、text/plain

options 關(guān)鍵的請(qǐng)求頭字段

request header 的關(guān)鍵字段

如：

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

response header 的關(guān)鍵字段

Options 請(qǐng)求優(yōu)化

當(dāng)我們發(fā)起跨域請(qǐng)求時(shí)，如果是簡(jiǎn)單請(qǐng)求，那么我們只會(huì)發(fā)出一次請(qǐng)求，但是如果是復(fù)雜請(qǐng)求則先發(fā)出 options 請(qǐng)求，用于確認(rèn)目標(biāo)資源是否支持跨域，然后瀏覽器會(huì)根據(jù)服務(wù)端響應(yīng)的 header 自動(dòng)處理剩余的請(qǐng)求，如果響應(yīng)支持跨域，則繼續(xù)發(fā)出正常請(qǐng)求，如果不支持，則在控制臺(tái)顯示錯(cuò)誤。

由此可見，當(dāng)觸發(fā)預(yù)檢時(shí)，跨域請(qǐng)求便會(huì)發(fā)送 2 次請(qǐng)求，既增加了請(qǐng)求數(shù)，也延遲了請(qǐng)求真正發(fā)起的時(shí)間，嚴(yán)重影響性能。

所以，我們可以優(yōu)化 Options 請(qǐng)求，主要有 2 種方法。

1.  轉(zhuǎn)為簡(jiǎn)單請(qǐng)求，如用 JSONP 做跨域請(qǐng)求

2.  對(duì) options 請(qǐng)求進(jìn)行緩存，服務(wù)器端設(shè)置 Access-Control-Max-Age 字段，那么當(dāng)?shù)谝淮握?qǐng)求該 URL 時(shí)會(huì)發(fā)出 OPTIONS 請(qǐng)求，瀏覽器會(huì)根據(jù)返回的 Access-Control-Max-Age 字段緩存該請(qǐng)求的 OPTIONS 預(yù)檢請(qǐng)求的響應(yīng)結(jié)果（具體緩存時(shí)間還取決于瀏覽器的支持的默認(rèn)最大值，取兩者最小值，一般為 10 分鐘）。在緩存有效期內(nèi)，該資源的請(qǐng)求（URL 和 header 字段都相同的情況下）不會(huì)再觸發(fā)預(yù)檢。（chrome 打開控制臺(tái)可以看到，當(dāng)服務(wù)器響應(yīng) Access-Control-Max-Age 時(shí)只有第一次請(qǐng)求會(huì)有預(yù)檢，后面不會(huì)了。注意要開啟緩存，去掉 disable cache 勾選。）

到此，關(guān)于“怎么理解options請(qǐng)求”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！