Question

我正在使用reactjs构建一个仅限前端的基本天气应用程序。对于API请求，我使用的是Fetch API。在我的应用中，我从simple 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问题。
我找到了proxy API来启用CORS请求。但由于这是位置请求，因此这为我提供了代理服务器的位置。所以它不是解决方案。
我已经浏览了这个Stackoverflow question，并在我的http请求中将标题添加到标题中，但它并没有解决问题。（仍然会出现同样的错误）。

那么如何永久解决问题呢？我可以用什么来解决Fetch API中http请求的CORS问题的最佳解决方案？

Answer 1

您应该使用代理解决方案，但是将其传递给客户端的IP而不是代理。以下是使用WikiMedia的IP指定的API的示例URL格式：

http://ip-api.com/json/208.80.152.201

Answer 2

如果您要发布、发布或修补请求，则必须使用 body: JSON.stringify(data)

对数据进行字符串化

fetch(URL, 
        {
            method: "POST", 
            body: JSON.stringify(data),
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
            }
        }
    ).then(response => response.json())
    .then(data => {
        ....
    })
    .catch((err) => {
        ....
        })
    });

Answer 3

该API似乎是宽容的，以Access-Control-Allow-Origin:*

我还没有弄明白是什么原因导致了您的问题，但我认为这不仅仅是fetch API。

这在Firefox和Chrome中都适用于我......

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

如何修复Fetch API

3 个答案: