跨域時(shí)，遇到的options 請(qǐng)求詳解

2022-10-09 14:35 作者:doubleyong 0人讀過(guò) | 我要投稿

背景：

在項(xiàng)目跨域中，發(fā)送post 請(qǐng)求時(shí)；?發(fā)現(xiàn)服務(wù)器收到了兩次請(qǐng)求，一次options請(qǐng)求，一次post請(qǐng)求;

本文就是針對(duì)這個(gè)options請(qǐng)求，進(jìn)行分析.

1、什么是options請(qǐng)求？

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

語(yǔ)法：

OPTIONS /index.html HTTP/1.1OPTIONS * HTTP/1.1

2、options 應(yīng)用場(chǎng)景

場(chǎng)景一：檢測(cè)服務(wù)器所支持的請(qǐng)求方法

可以使用 OPTIONS 方法對(duì)服務(wù)器發(fā)起請(qǐng)求，以檢測(cè)服務(wù)器支持哪些 HTTP 方法：

curl?-X?OPTIONS?http://example.org?-i

解析：curl 是一個(gè)指令，在類似liunx操作系統(tǒng)中，可以使用curl指令去發(fā)起請(qǐng)求

場(chǎng)景二：CORS 中的預(yù)檢請(qǐng)求

在 CORS 中，可以使用 OPTIONS 方法發(fā)起一個(gè)預(yù)檢請(qǐng)求，以檢測(cè)實(shí)際請(qǐng)求是否可以被服務(wù)器所接受。

解析:

cors 是解決跨域的一種常見(jiàn)方式，至于為什么會(huì)有跨域，這就是瀏覽器的一種安全策略：瀏覽器同源策略；這里就不贅述了。

跨域資源共享(CORS)是一種機(jī)制，它使用額外的HTTP頭來(lái)告訴瀏覽器讓運(yùn)行在一個(gè)origin (domain)上的Web應(yīng)用被準(zhǔn)許訪問(wèn)來(lái)自不同源服務(wù)器上的指定的資源。當(dāng)從與該資源本身所在的服務(wù)器不同的域或端口請(qǐng)求一個(gè)資源時(shí)，資源會(huì)發(fā)起一個(gè)跨域HTTP請(qǐng)求。

比如，站點(diǎn)http://domain-a.com 的某 HTML頁(yè)面通過(guò)的src請(qǐng)求 http:ldomain-b.com/image.jpg 。網(wǎng)絡(luò)上的許多頁(yè)面都會(huì)加載來(lái)自不同域的CSS樣式表，圖像和腳本等資源。

出于安全原因，瀏覽器限制從腳本內(nèi)發(fā)起的跨源HTTP請(qǐng)求。例如XMLHttpRequest和Fetch API遵循同源策略。

這意味著使用這些API的Web應(yīng)用程序只能從加載應(yīng)用程序的同一個(gè)域請(qǐng)求HTTP資源，除非使用CORS頭文件。

瀏覽器將CORS請(qǐng)求分為兩類：簡(jiǎn)單請(qǐng)求（simple request）和?簡(jiǎn)單請(qǐng)求（not-simple-request）,簡(jiǎn)單請(qǐng)求瀏覽器不會(huì)預(yù)檢，??簡(jiǎn)單請(qǐng)求會(huì)預(yù)檢。

同時(shí)滿?下列三?條件，就屬于簡(jiǎn)單請(qǐng)求，否則屬于?簡(jiǎn)單請(qǐng)求

請(qǐng)求?式只能是：GET、POST、HEAD

2.HTTP請(qǐng)求頭限制這?種字段：Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID

3.Content-type只能?。篴pplication/x-www-form-urlencoded、multipart/form-data、text/plain

?3. 優(yōu)化OPTIONS請(qǐng)求：Access-Control-Max-Age 或者避免觸發(fā)

可見(jiàn)一旦達(dá)到觸發(fā)條件，跨域請(qǐng)求便會(huì)一直發(fā)送2次請(qǐng)求，這樣增加的請(qǐng)求數(shù)是否可優(yōu)化呢？答案是可以，OPTIONS預(yù)檢請(qǐng)求的結(jié)果可以被緩存。

Access-Control-Max-Age這個(gè)響應(yīng)首部表示 preflight request （預(yù)檢請(qǐng)求）的返回結(jié)果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息）?可以被緩存的最長(zhǎng)時(shí)間，單位是秒。