如何在客户端处理CORS错误(React-Redux-Axios)

时间:2017-09-28 09:33:05

标签: reactjs http-headers cors cross-domain axios

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

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

这里我面临CORS错误,而重定向xyz服务驻留在另一个域中,此xyz服务不会发送标头“ Access-Control-Allow-Origin:* ”。

如何在不更改服务器端的情况下解决此问题。我可以像https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS中提到的那样制作“简单请求”。我试过这种方式,但它没有用。

请帮帮我。感谢。

1 个答案:

答案 0 :(得分:0)

从本质上讲,此错误消息表示您的客户端检测到某种安全问题。它要警告您,即使该网页正在从服务器A提取数据,但实际上该网站不是托管在服务器A上,而是托管在服务器B上。

要解决此问题,您应该查看网络服务器A(托管您的休息服务的服务器)。那是您需要添加一些东西的地方。服务器实际上应该发送一种响应,以告知您的客户端这种情况。

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

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

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

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

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

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