我相信有很多細(xì)心的小伙伴在做項(xiàng)目的過(guò)程中會(huì)發(fā)現(xiàn)，明明接口只調(diào)用了一次，為什么 network 中出現(xiàn)了兩次請(qǐng)求？并且第一次請(qǐng)求方法為 OPTIONS ，請(qǐng)求狀態(tài)為200，而返回 body 體為空。而第二次才是正常的請(qǐng)求，這是由什么引起的呢？查了很久的資料，發(fā)現(xiàn)這是由跨域請(qǐng)求引起的跨域預(yù)檢請(qǐng)求。
image.png
image.png
image.png
首先要理解什么是跨域請(qǐng)求（CORS）
跨域請(qǐng)求我已經(jīng)在前幾篇文章中有寫(xiě)到，不明白的小朋友可以先去看看那一篇。
CORS preflight(跨域預(yù)檢請(qǐng)求)
跨域請(qǐng)求分為簡(jiǎn)單請(qǐng)求和復(fù)雜請(qǐng)求兩種。能夠引起預(yù)檢請(qǐng)求的被叫做復(fù)雜請(qǐng)求，反之則為簡(jiǎn)單請(qǐng)求。然而，并不是所有的跨域請(qǐng)求都會(huì)引起預(yù)檢請(qǐng)求的，那么哪些情況能引起此操作呢？
- 當(dāng)請(qǐng)求方法包括下面任何一種的時(shí)候
- PUT
- DELETE
- CONNECT
- OPTIONS
- TRACE
- PATCH
- 當(dāng)請(qǐng)求中包括除Fetch spec定義為“CORS-safelisted請(qǐng)求報(bào)頭”以外的任何報(bào)頭，如下所示：
- Accept
- Accept-Language
- Content-Language
- Content-Type
- DPR
- Downlink
- Save-Data
- Viewport-Width
- Width
- 當(dāng)Content-Type被設(shè)置為除了下面任何一種選項(xiàng)時(shí)
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
- 當(dāng)XMLHttpRequestUpload對(duì)象上被注冊(cè)一個(gè)或多個(gè)事件偵聽(tīng)器時(shí)
- 當(dāng)請(qǐng)求中未使用ReadableStream對(duì)象時(shí)。
跨域請(qǐng)求的一次復(fù)雜請(qǐng)求過(guò)程如圖
image.png
結(jié)論
跨域預(yù)檢請(qǐng)求是瀏覽器和服務(wù)器之間的安全校驗(yàn)操作，屬于正?，F(xiàn)象，現(xiàn)在出現(xiàn)兩次請(qǐng)求的小伙伴可以看看你的請(qǐng)求中是不是出現(xiàn)上述的設(shè)置了呢？
