如何解决Fetch API中的CORS问题

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用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.

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

  1. 在Chrome中启用CORS可以解决该错误，但是当我在heroku上部署该应用程序时，如何通过移动设备访问它而又不会遇到相同的CORS问题。

  2. 我找到了启用CORS请求的代理API。但这是一个位置请求，因此可以给我代理服务器的位置。因此，这不是解决方案。

  3. 我已经解决了这个，并将标头添加到我的http请求中的标头中，但是它不能解决问题。（仍然会给出相同的错误）。

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

回答：

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

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

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

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

以上是 如何解决Fetch API中的CORS问题 的全部内容， 来源链接： utcz.com/qa/426178.html

回到顶部