如何解决Fetch API中的CORS问题

小编典典

如何解决Fetch API中的CORS问题

reactjs

我正在使用reactjs构建仅前端的基本Weather App。对于API请求，我正在使用Fetch
API。在我的应用程序中，我从找到的简单API获取当前位置，并将该位置作为JSON对象给出。但是，当我通过Fetch API请求它时，出现了此错误。

Failed to load http://ip-api.com/json: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

因此，我进行了搜索，找到了解决此问题的多种解决方案。

在Chrome中启用CORS可以解决该错误，但是当我在heroku上部署该应用程序时，如何通过移动设备访问它而又不会遇到相同的CORS问题。
我找到了启用CORS请求的代理API。但这是一个位置请求，因此可以给我代理服务器的位置。因此，这不是解决方案。
我已经解决了这个，并将标头添加到我的http请求中的标头中，但是它不能解决问题。（仍然会给出相同的错误）。

那么，如何才能永久解决该问题？我可以用来解决Fetch API中HTTP请求的CORS问题的最佳解决方案是什么？

阅读 948

2020-07-22

共1个答案

小编典典

该API似乎是允许的，以 Access-Control-Allow-Origin:*

我还没有弄清楚是什么原因导致了您的问题，但是我认为这不仅仅是fetchAPI。

对于Firefox和Chrome来说，这对我来说都很好…

fetch('http://ip-api.com/json')
   .then( response => response.json() )
   .then( data => console.log(data) )

2020-07-22