如何修复 localhost 中的 react cors 错误？

Posted 2023-02-22

【中文标题】如何修复 localhost 中的 react cors 错误？

【英文标题】：How to Fix react cors error in localhost?

【发布时间】：2020-02-28 22:08:56

【问题描述】：

我正在开发一个反应应用程序。我在哪里请求 AXios 提供 API。但是当我运行 NPM START 在 localhost 中测试我的应用程序时，我收到了 CORS 错误。这是错误 从源“http://localhost:3000”访问“https://********.com/trx_status.php”处的 XMLHttpRequest 已被 CORS 策略阻止：访问不允许请求标头字段私钥-Control-Allow-Headers 在预检响应中。

我是 react 新手。请告诉我如何解决这个问题。谢谢...

【问题讨论】：

No 'Access-Control-Allow-Origin' - Node / Apache Port Issue的可能重复

【参考方案1】：

为此，您需要在您将要部署的 URL 的后端代码中允许 CORS，并且您可以将该 URL 用作代理。您可以参考此documentation 了解详细说明。

【参考方案2】：

在您的应用程序目录中打开 package.json 文件，然后添加此行（最好在“private”行下，如下图所示。这也适用于任何其他 url如果您的后端不在本地主机上。

"proxy": "http://localhost:3000/",

请记住在此更改后重新启动您的服务器！

【参考方案3】：

错误是由发送到服务器的自定义privatekey 标头引起的。该字段必须包含在来自服务器的Access-Control-Allow-Headers 响应标头中。可以使用：

Access-Control-Allow-Headers: privatekey

使用php时可以使用以下sn-p：

header('Access-Control-Allow-Headers: X-Requested-With, privatekey');

【参考方案4】：

在我看来，这似乎是您服务器端的问题。所以你可以尝试做的是尝试添加标题“Access-Control-Allow-Origin：*”。

如果您可以将其发布在 jsfiddle 或某个编辑器中的某个位置，这样我们可以进一步查看它，这将很有帮助。

谢谢

【讨论】：

这个问题和来源无关，是不是和客户端发送的headers有关。

啊！如果是这样，那么它应该就像你提到的那样。干杯伙伴！

别担心！感谢您的贡献！