在 React 应用中启用 CORS

Posted 2023-02-22

【中文标题】在 React 应用中启用 CORS

【英文标题】：Enable CORS in React app

【发布时间】：2018-12-15 17:54:40

【问题描述】：

我正在设置一个从公共 API 中提取的 React 应用程序。当我在 Postman 中测试 API 时，它可以正常工作。但是如果我在我的 React 应用程序中使用 fetch()，我会收到一个 CORS 错误。

据我了解，我的客户端请求应该允许在服务器上使用标头。但是我不拥有托管 API 的服务器，所以我不能在服务器上做任何事情。 API 被配置为使用访问代码的第三方应用程序使用，所以我有点困惑为什么不允许从 React 中的 API 中提取它。

我有什么选择？

【问题讨论】：

您很可能必须使用自己的服务器作为中间人，以便浏览器仅从同一来源获取数据。

这是什么 cors 错误，所以我们可以设置正确的标题？

【参考方案1】：

如果你没有服务器访问权限，那么你可以绕过它

CORS 任何地方：https://cors-anywhere.herokuapp.com/ 所有起源：http://allorigins.me/ 任何来源：http://anyorigin.com/

【参考方案2】：

CORS 是一个安全的东西，在大多数情况下，最好的做法是不要尝试让客户端在任何地方进行标注（旧的客户端 CORS * * * hackaroonie）。

相反，按照 Tholle 在中间人上方的建议，在同一部署（相同来源）中设置一个简单的服务器端中继。

有一个简短的示例说明您将如何做到这一点here。