原谅我明显犯的错误...
我了解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.
我无法理解的是什么?我到底能做些什么? (我无法控制服务器)
答案 0 :(得分:1)
Postman应用程序不是浏览器,因此不受CORS规则的约束。同样在浏览器中,尝试直接访问URL不会触发跨域请求共享策略。根据定义,CORS仅会影响从网页的后台JS代码到另一个不在同一域名上托管的网页或API的“跨域”请求。
基于所发布的错误,所讨论的API没有发送Access-Control-Allow-Origin
标头。如果可以更改API,则应将标头添加到响应中(值“ *”或您的域名)。但是,如果那不可能,那么您需要通过您拥有的Web服务器路由请求,并在其中包含此标头。尽管确实是专门的用例,但这种工作确实像代理一样。
如果您已经在运行某些服务器端应用程序,则只需在应用程序中添加另一个端点即可。对此新端点的调用应触发“公共API”调用,并将响应发送回客户端。由于服务器端程序(例如PHP / Python / NodeJS)永远不会成为浏览器,因此它们将不会遇到CORS问题。如果您的原始网页也从同一Web服务器加载,则可以跳过响应标头。