如何解决Fetch API中的CORS问题

Question

我正在使用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. 我已经解决了这个Stackoverflow问题，并将标头添加到我的http请求中的标头中，但是它不能解决问题。（仍然会给出相同的错误）。

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

Answer 1

致无数未来的访客：

如果我原来的答案对您没有帮助，您可能一直在寻找：

• 尝试使用获取并传递模式：no-cors
• 什么是不透明的回应，它的目的是什么？

关于OP面临的问题...

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

我还没有弄清楚是什么导致了你的问题，但我不认为这只是fetch API。

这对我来说在 Firefox 和 Chrome 中都工作得很好......

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

Answer 2

如果您正在发出post,put或patch请求，则必须使用以下命令对数据进行字符串化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) => {
        ....
        })
    });