如何修复 Fetch API 中的 CORS 问题

Question

我正在使用reactjs构建一个仅前端的基本天气应用程序。对于 API 请求，我使用 Fetch API。 在我的应用程序中，我从我发现的简单 API 获取当前位置 它以 JSON 对象的形式给出位置。但是当我通过 Fetch API 请求它时，我收到此错误。

无法加载http://ip-api.com/json：预检响应中的Access-Control-Allow-Headers不允许请求标头字段Access-Control-Allow-Origin。

所以我搜索并找到了多种解决方案来解决这个问题。

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

那么我怎样才能永久解决这个问题呢？我可以用来解决 Fetch API 中 http 请求的 CORS 问题的最佳解决方案是什么？

Answer 1

致无数未来的访客：

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

• 尝试使用fetch并传入模式：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) => {
        ....
        })
    });

Answer 3

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

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