沃梦达 / 编程问答 / php问题 / 正文

Reaction+PHP API引发CORS印前检查错误

React + PHP API throws CORS preflight error(Reaction+PHP API引发CORS印前检查错误)

本文介绍了Reaction+PHP API引发CORS印前检查错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试从运行于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印前检查错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Reaction+PHP API引发CORS印前检查错误

基础教程推荐