如何修复 Fetch API 中的 CORS 问题

IT技术 javascript reactjs http cors fetch-api
2021-05-12 09:36:34

我正在使用 reactjs 构建一个仅限前端的基本天气应用程序。对于 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 问题的最佳解决方案是什么？

3个回答

如果您要发布帖子、放置或补丁请求，则必须使用以下命令对数据进行字符串化 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) => {
        ....
        })
    });

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

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

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

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

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

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

其它你可能感兴趣的问题
上一篇React.js - componentWillReceiveProps 被击中两次 下一篇化工用长丝材料