如何修复获取API中的CORS问题

Question

我正在使用reactjs构建一个前端唯一的基本天气应用程序。对于API请求，我使用Fetch API。在我的应用程序中，我从一个简单的API获取当前位置，它以JSON对象的形式给出了位置。但是当我通过获取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. 我找到了一个代理API，它支持CORS请求。但是由于这是一个定位请求，这给了我代理服务器的位置。所以这不是解决办法。
3. 我已经通过了这个Stackoverflow问题，并在我的超文本传输协议请求中向标题添加了标题，但它并没有解决问题。（它仍然给出了相同的错误）。

那么，我怎样才能永久性地解决这个问题呢？在FetchAPI中解决http请求的CORS问题的最佳解决方案是什么？

Answer 1

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

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

Answer 2

该API似乎是允许的，响应为访问控制允许源代码：

我还没有弄清楚是什么导致了你的问题，但我不认为这仅仅是获取应用编程接口。

这对我来说在Firefox和Chrome上都很好。。。

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

Answer 3

如果您正在进行发布、发布或补丁请求，则必须使用JSON. stringify（data）正文对数据进行Stringify。

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