javascript - 独立 React 应用程序中的 Web API 调用生成 CORS 错误

Question

我有一个项目，它只是一个前端，是用 React 构建的，我在其中尝试在单击 LI 时调用外部 API。这是我的一个组件的代码。我从这个片段中取出了实际的 url，因为它很长，但是在使用 Postman 时调用有效。

getPlayerStats(name) {
    fetch(url)
        .then(function(response) {
            return response.resultSets.rowSet
        })
}

这会在我的浏览器控制台中产生此错误:请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问 Origin 'null'。

关于这个问题有什么帮助吗？我读过的大部分信息都对后端的操作提出了建议，但我的项目没有后端。谢谢!

Answer 1

您的问题是您正在使用 file:// 加载您的应用程序, 浏览器将不会使用 CORS政策 file://

您必须使用像 Apache 这样的本地服务器或 Nginx为您的前端应用程序提供服务并使用 localhost 再次加载，在这种情况下，对 API 的请求将具有 header Origin具有值(value)，服务器将接受它。

如果您正在开发前端应用程序，这不是加载 file:// 的好方法, 始终使用本地网络服务器。