大多數(shù)初級前端程序員，在通過瀏覽器F12的調(diào)試工具調(diào)試網(wǎng)絡(luò)請求時(shí)，可能都會有一個(gè)發(fā)現(xiàn)，在進(jìn)行POST請求時(shí)，明明代碼里只請求了一次，為什么network里發(fā)送了兩次呢，難道我代碼出bug了？帶著疑問點(diǎn)開第一個(gè)請求才發(fā)現(xiàn)，原來第一個(gè)是OPTIONS類型的請求，第二個(gè)才是我代碼里寫的POST類型的請求。那為什么，POST請求之前默認(rèn)伴隨著一個(gè)OPTIONS請求呢？
我本人也是在第一份實(shí)際工作中，才發(fā)現(xiàn)了這個(gè)事情，帶著疑問查詢了一些資料，才知曉了其中緣由。在這個(gè)過程中也了解到了一些不常用的HTTP協(xié)議請求的方法以及它們的作用，比如OPTIONS。
公眾號：Code程序人生，個(gè)人網(wǎng)站：https://creatorblog.cn
可能大多數(shù)程序員，職業(yè)生涯里，90%遇到和創(chuàng)造的接口都是GET和POST，秉持著"不用就不學(xué)"的原則，越來越多的HTTP協(xié)議的請求方法淡化在了大家視野里，自然在遇到的時(shí)候就不知道它是干啥的了。
背景
在Web開發(fā)中，我們經(jīng)常會遇到跨域請求的問題。當(dāng)前端應(yīng)用試圖從一個(gè)源（origin）上的Web頁面訪問另一個(gè)源上的資源時(shí)，瀏覽器會執(zhí)行跨域請求，其中POST請求常常會伴隨著兩次發(fā)送：一次OPTIONS請求（CORS預(yù)檢）和一次實(shí)際的POST請求。
為什么會有這兩次請求？下文我們繼續(xù)深入解釋這個(gè)問題，逐步探究CORS預(yù)檢的原因和機(jī)制。
什么是CORS（跨源資源共享）
CORS是一種瀏覽器的安全策略，用于控制一個(gè)源（domain、protocol、port的組合）的Web頁面是否可以請求另一個(gè)源的資源。CORS通過在服務(wù)器響應(yīng)頭中添加特定的字段，告訴瀏覽器是否允許來自其他源的請求。
為什么POST請求需要CORS預(yù)檢
POST請求通常用于向服務(wù)器提交數(shù)據(jù)，但由于安全性考慮，瀏覽器會限制跨域POST請求。在實(shí)際發(fā)送POST請求之前，瀏覽器會發(fā)送一個(gè)OPTIONS請求，以便確認(rèn)目標(biāo)服務(wù)器是否允許實(shí)際的POST請求。
GET請求一定不需要CORS預(yù)檢嗎
CORS預(yù)檢是一種安全機(jī)制，用于控制跨域請求的訪問權(quán)限。對于簡單請求（Simple Requests），包括使用GET、HEAD、POST其中一種方法，且只使用了以下幾種簡單請求頭（Simple Request Headers）的請求，瀏覽器會自動(dòng)處理CORS，無需進(jìn)行預(yù)檢：
- Accept
- Accept-Language
- Content-Language
- Content-Type（僅限于 application/x-www-form-urlencoded、multipart/form-data、text/plain）
因此，GET請求通常不會觸發(fā)CORS預(yù)檢。只有當(dāng)你的請求是跨域的、使用了非簡單請求頭、或者使用了不支持的HTTP方法時(shí)，才會觸發(fā)CORS預(yù)檢。對于非簡單請求，瀏覽器會在實(shí)際請求之前發(fā)送一個(gè)OPTIONS請求，用來確認(rèn)服務(wù)器是否支持跨域請求。而對于簡單請求，瀏覽器會直接發(fā)送實(shí)際的GET請求，不需要進(jìn)行預(yù)檢。
CORS預(yù)檢的過程
- 瀏覽器發(fā)送OPTIONS請求：
當(dāng)瀏覽器發(fā)現(xiàn)一個(gè)跨域的POST請求時(shí)，它首先發(fā)送一個(gè)OPTIONS請求到目標(biāo)服務(wù)器，這是CORS預(yù)檢的開始。
- 服務(wù)器響應(yīng)CORS頭信息：
服務(wù)器接收到OPTIONS請求后，檢查請求中的信息，并返回響應(yīng)。響應(yīng)中包含了CORS頭信息，其中包括允許的HTTP方法、允許的請求頭等。如果服務(wù)器返回的CORS頭信息允許實(shí)際的POST請求，瀏覽器才會繼續(xù)發(fā)送實(shí)際的POST請求。
服務(wù)端示例代碼
在服務(wù)器端，你需要配置CORS，以允許來自特定源的POST請求。以下是Nodejs Express框架的示例：
const express = require('express');
const app = express();
// 配置CORS，允許所有源的POST請求
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*'); // 允許所有源
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // 允許的HTTP方法
res.header('Access-Control-Allow-Headers', 'Content-Type'); // 允許的請求頭
next();
});
// 實(shí)際的POST請求處理
app.post('/api/data', (req, res) => {
// 處理POST請求的邏輯
res.send('POST請求成功！');
});
app.listen(3000, () => {
console.log('服務(wù)器啟動(dòng)在端口 3000');
});
在上述代碼中，通過配置Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers等響應(yīng)頭信息，服務(wù)器明確指定了允許的源、HTTP方法和請求頭。文章來源：http://www.zghlxwxcb.cn/news/detail-720149.html
總結(jié)
POST請求發(fā)送兩次的現(xiàn)象是因?yàn)闉g覽器在執(zhí)行跨域的POST請求時(shí)，為了確保安全性，會發(fā)送一個(gè)OPTIONS請求進(jìn)行CORS預(yù)檢。服務(wù)器的CORS配置決定了是否允許實(shí)際的POST請求。理解CORS預(yù)檢的過程，能夠幫助我們更好地處理跨域請求問題，確保Web應(yīng)用的安全性和穩(wěn)定性。文章來源地址http://www.zghlxwxcb.cn/news/detail-720149.html
到了這里，關(guān)于為什么POST請求經(jīng)常發(fā)送兩次？的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
