我正在嘗試localhost:8000從運行于localhost:3000. 經過多次嘗試，我仍然收到“ CORS 預檢未成功”錯誤。
從 React 應用程式發送：
從開發工具發送：
我的 API 具有以下標頭：
if (@$_SERVER['HTTP_ORIGIN']) {
header("Origin: http://localhost:8000");
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
}
我像這樣使用 fetch 呼叫 API（但它以某種方式發送空請求正文）：
let inputData:object = {email, password}
fetch("http://localhost:8000/data/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(inputData)
})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
奇怪的是，當直接從瀏覽器 devtools（第二個螢屏截圖）或 Insomnia 等 API 客戶端發送請求時，請求作業正常：
uj5u.com熱心網友回復：
問題
您的第一個螢屏截圖表明對預檢請求的回應具有狀態代碼 404。但是，CORS 預檢成功的必要條件是ok 狀態（即 2xx 范圍內的狀態）。請參閱Fetch 標準的相關部分 (3.2.3)：
對 CORS 請求的成功 HTTP 回應（即服務器開發人員打算共享它的回應）可以使用任何狀態，只要它包含上述標頭且值與請求匹配即可。
對 CORS 預檢請求的成功 HTTP 回應與此類似，不同之處在于它僅限于 ok 狀態，例如 200 或 204。
（我的重點）
解決方案
確保您的服務器以 2xx 狀態回應旨在成功的預檢請求。
附加說明
- 永遠不需要允許
Origin標頭，因為它是由用戶代理設定的。您可以Origin從Access-Control-Allow-Headers回應標頭的值中洗掉。 - 為什么要
Origin在回應中設定標頭尚不清楚...Origin是請求標頭。你應該能夠放下那條header("Origin: http://localhost:8000");線。 - 您應該考慮使用經過驗證的 CORS 中間件，而不是“手動”實作 CORS（容易出錯）。
uj5u.com熱心網友回復：
您的 cors 來源必須是 localhost:3000。
header("來源：http://localhost:3000");
因為你的前端運行在 3000 上。
請求來自何處應添加為 cors 定義。
uj5u.com熱心網友回復：
php在將回應回傳給前端應用程式之前，請確保您沒有輸出任何內容。一個簡單的echo "test";或print_r，vardump等等可以觸發這個錯誤。
另外，請確保開始<?php標記之前沒有空行，因為它們會向前端發送可能導致此錯誤的過早回應。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/394877.html
上一篇：Python位移與PHP位移
下一篇：無論如何要拆分curl請求嗎？