问题描述
我正在尝试从运行于localhost:3000的Reaction应用程序调用运行于localhost:8000的PHP API。经过多次尝试，我仍然收到CORS印前检查未成功&错误。
从DevTool发送：
我的接口有以下头部：
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客户端发送时，请求都正常工作推荐答案
问题
您的第一个屏幕截图指示对印前检查请求的响应具有状态代码404。然而，CORS飞行前检查成功的必要条件是ok status(即处于2xx范围内的状态)。请参阅relevant section (3.2.3) of the Fetch standard：
对CORS请求的成功的HTTP响应，即服务器开发者打算共享它的响应，可以使用任何状态，只要它包含上面提到的具有与请求匹配的值的标头。
对CORS-印前检查请求的成功HTTP响应与此类似，只是它被限制为正常状态，例如200或204。
(我的重点)
解决方案
确保您的服务器以2xx状态响应本应成功的印前检查请求。
其他备注
永远不需要允许Origin头，因为它是由用户代理设置的。您可以从Access-Control-Allow-Headers响应头的值中删除Origin。
您为什么要在响应中设置Origin头不清楚...Origin is a request header。您应该能够删除header("Origin: http://localhost:8000");行。
您应该考虑使用经过验证的CORS中间件，而不是手动实现CORS(这很容易出错)。