无法获取 - 请求的资源上不存在“Access-Control-Allow-Origin”header

Question

我正在尝试使用 React 显示来自 API 的事件列表。

这是 EventList.js 文件。

这是我尝试在“事件”页面上呈现事件列表 API 的方式。

这是我不断收到的错误。

我尝试通过登录界面登录 API，然后获取 URL，但我仍然收到此错误。 当我从 go 到 API 时，我可以看到所有返回的事件，但是当我运行浏览器时，信息不显示。

这是应该从 Swagger UI 返回的 JSON。

Answer 1

您（或编写 API 的人）应该在 CORS 列表中拥有您的 localhost。 我看到你正在使用 Azure 那么它应该是这样的：

• Go 到 Azure 中的 WebApp 服务。
• Go 到 CORS（如果它关闭，则启用它）
• 添加您的地址“https://localhost:44393”以及您需要的所有地址。
• 然后再试一次。

我曾经在我的 API 代码中拥有所有地址以防止但我仍然需要将它们添加到 Azure WebApp 中。

Answer 2

将 fetchEvents function 更改为此对我有用！

fetchEvents = () => {

    const proxyurl = "https://secret-ocean-49799.herokuapp.com/";
    const url = SERVER_URL + '/api/v1/event';

    fetch(proxyurl + url)
        .then((resp) => resp.json())
        .then((data) => {
            this.setState({
                data: data.data
            });
            console.log(data);
        })
        .catch((error) => {
            console.log(error);
        });
}