在create-react-app中调用axios时,公共API给我CORS错误,但在Chrome和Postman中一切正常

时间:2019-05-27 18:29:51

标签: reactjs cors axios fetch

原谅我明显犯的错误...

我了解CORS,以及如何使用它以及为什么使用它。但在这种情况下,我却错过了令人眼花obvious乱的明显情况。

我正在尝试访问应该可以正常使用的公开API(我确信)

如果我在Chrome或Postman中点击了端点,则一切正常:返回了出色的JSON。

当我尝试在我的create-react-app的axios中使用componentDidMount做同样的事情时,我收到了CORS错误,特别是

Access to XMLHttpRequest at 'http://some-interesting-url/sub-url?blabla=blip&foo=bar' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我无法理解的是什么?我到底能做些什么? (我无法控制服务器)

1 个答案:

答案 0 :(得分:1)

Postman应用程序不是浏览器,因此不受CORS规则的约束。同样在浏览器中,尝试直接访问URL不会触发跨域请求共享策略。根据定义,CORS仅会影响从网页的后台JS代码到另一个不在同一域名上托管的网页或API的“跨域”请求。

基于所发布的错误,所讨论的API没有发送Access-Control-Allow-Origin标头。如果可以更改API,则应将标头添加到响应中(值“ *”或您的域名)。但是,如果那不可能,那么您需要通过您拥有的Web服务器路由请求,并在其中包含此标头。尽管确实是专门的用例,但这种工作确实像代理一样。

如果您已经在运行某些服务器端应用程序,则只需在应用程序中添加另一个端点即可。对此新端点的调用应触发“公共API”调用,并将响应发送回客户端。由于服务器端程序(例如PHP / Python / NodeJS)永远不会成为浏览器,因此它们将不会遇到CORS问题。如果您的原始网页也从同一Web服务器加载,则可以跳过响应标头。