如何在客户端处理 CORS 错误（React-Redux-Axios）

Posted 2023-03-04

【中文标题】如何在客户端处理 CORS 错误（React-Redux-Axios）

【英文标题】：How to handle CORS error in client side(React-Redux-Axios)

【发布时间】：2018-03-09 23:53:46

【问题描述】：

在我的 react-redux 应用程序中，我通过 axios 向我的后端服务 api 发出服务请求，我在这里很好，因为我可以完全控制我的后端服务，所以我添加了“Access-Control-Allow-Origin : *" 标题在我的服务的每个响应中。请注意，这里我的客户端和服务器托管在不同的服务器域中。

但问题是有一个服务将重定向到另一个 xyz 服务驻留在我没有任何控制权的另一个域中。现在 xyz 服务将在某些验证（登录会话）上重定向回我的服务器，我的服务器最终将响应发送到我的基于反应的客户端。

我在重定向 xyz 服务位于另一个域中时遇到 CORS 错误，该 xyz 服务不发送标头“Access-Control-Allow-Origin: *”。

如何在不更改服务器端的情况下解决此问题。我可以提出https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 中提到的“简单请求”吗？这种方法我试过了，但是不行。

请帮助我。谢谢。

【问题讨论】：

Understanding AJAX CORS and security considerations的可能重复

如果问题是关于使用 axios 进行跨域请求，那么很抱歉，它不能通过服务器端更改来完成。您可以在此处签出另一个名为 reqwest 的 xhttp 模块 -> github.com/ded/reqwest 。即便如此，只有在浏览器支持的情况下才允许使用 CORS。

@luciferous 谢谢。所以你的意思是 reqwest 也会为我的情况抛出 cors 错误。

是的。除非 xyz 服务设置了适当的响应标头或实现了 JSONP（我对此表示怀疑）！

【参考方案1】：

本质上，此错误消息意味着您的客户端检测到一种安全问题。它想警告您，即使网页正在从服务器 A 获取数据，但实际上该网站并非托管在服务器 A 上，而是托管在服务器 B 上。

要解决此问题，您应该查看网络服务器 A（托管您的其余服务的服务器）。这就是你需要添加一些东西的地方。服务器实际上应该发送一种响应，通知您的客户端有关情况。

实际上是您的后端托管了必须发送特定标头以支持 CORS 的其余服务。

您的客户实际上会访问您的服务器 2 次。

首先它将进行“预检”以检查 Web 服务具有哪些属性。该预检应该发送带有一堆 HTTP 标头的响应。其中一个标头通知客户端允许的来源（客户端可以在其上运行的允许服务器）。该来源列表可以是通配符（即*）或特定的主机名列表。这告诉您的客户它不应该担心这个问题。

然后客户端建立第二个连接来实际执行你的服务。

很难为您提供更多信息，因为它取决于您使用的网络服务器类型：

例如如果您有一个带有嵌入式 Jetty 服务器的 Java 后端（可能也适用于其他 Web 服务器），那么您可以定义一个过滤器这些预检并在这些情况下发送正确的标头。 (CrossOriginFilter)。