Reaction+PHP API引发CORS印前检查错误 [英] React + PHP API throws CORS preflight error

问题描述

我正在尝试从运行于localhost:3000的Reaction应用程序调用运行于localhost:8000的PHP API。经过多次尝试，我仍然收到CORS印前检查未成功&错误。

从Reaction应用程序发送：

从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状态响应本应成功的印前检查请求。

---

其他备注

1. 永远不需要允许Origin头，因为它是由用户代理设置的。您可以从Access-Control-Allow-Headers响应头的值中删除Origin。
2. 您为什么要在响应中设置Origin头不清楚...Origin is a request header。您应该能够删除header("Origin: http://localhost:8000");行。
3. 您应该考虑使用经过验证的CORS中间件，而不是手动实现CORS(这很容易出错)。

这篇关于Reaction+PHP API引发CORS印前检查错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！