在我的 React 应用程序中获取 api 数据时如何修复 CORS 错误？

Posted 2023-03-04

【中文标题】在我的 React 应用程序中获取 api 数据时如何修复 CORS 错误？

【英文标题】：How to fix CORS error when fetching api data in my React application?

【发布时间】：2019-09-14 16:36:53

【问题描述】：

我最近将我的 ASp.NET CORE React with Redux（和 KendoUI React）项目上传到我的 Azure 托管平台，现在我无法访问从 API 获取的任何数据。我查看了控制台，看到一条错误消息：

CORS 策略已阻止从源“https://mywebsite.azurewebsites.net”在“https://login.microsoftonline.com/xxx-xxx-xxx-xxx-xxx/oauth2/authorize?client_id=xxx-xxx-xxx-xxx-xxx&redirect_uri=https%3A%2F%2Fmywebsite.azurewebsites.net%2Fsignin-oidc&response_type=id_token&scope=openid%20profile&response_mode=form_post&nonce=xxx.xxxstate=xxx-xxx-xxx-xxx-xxxxxx&x-client-SKU=ID_NET&x-client-ver=2.1.4.0”（从“https://mywebsite.azurewebsites.net/api/MyData/GetMyData?page=1&pageSize=20”重定向）获取的访问权限：没有“Access-Control-Allow-Origin”标头出现在请求的资源。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我通过搜索错误消息调查了这个问题，我发现了一些帖子，但没有具体说明在最佳实践和安全的反应应用程序中应该做什么。

我在 fetch 中添加了 Access-Control-Allow-Origin: * 的标头，但它不起作用。我发现的另一种方法是使用代理，但该示例仅支持本地开发环境。

这是我的抓取，您可以看到我在标题中添加了Access-Control-Allow-Origin：

fetchData(dataState) 
    const queryStr = `$toDataSourceRequestString(dataState)`;
    const hasGroups = dataState.group && dataState.group.length;
    const base_url = 'api/MyData/GetMyData';
    const init =  method: 'GET', accept: 'application/json', headers: "Access-Control-Allow-Origin: *" ;

    fetch(`$base_url?$queryStr`, init)
        .then(response => response.json())
        .then(( Data, total ) => 
                this.setState(
                    result: hasGroups ? translateDataSourceResultGroups(Data) : Data,
                    total,
                    dataState
                );
            ).catch(function (error) 
                console.log('Error: \n', error);
            );
;

添加标题没有任何改变，并且错误仍然存​​在。我想确保我这样做是正确的，谁能帮我解决这个错误？

【参考方案1】：

Access-Control-Allow-Origin 是响应标头。它只能由服务器设置。服务器确定它是否接受跨站点请求，在这种情况下，服务器拒绝。没有办法解决。

您似乎正在尝试访问您的 Azure 服务器，但它重定向到 Microsoft 登录页面。确保在发出请求时无需重定向即可访问服务器。还要确保您的 javascript 代码在同一个域上运行（我假设是），否则在 Web 服务器上配置 CORS：https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2

【讨论】：

这是一个令人困惑的行为，我已经登录但它仍在尝试重定向到登录页面。这很奇怪。我使用了 Microsoft 的链接文档，但出现了同样的错误。

是的，它必须与您的服务器有关。如果您仔细查看该错误，它会说它是从https://mywebsite.azurewebsites.net/api/MyData/GetMyData?page=1&pageSize=20 重定向的。这是您的服务器代码。很可能您犯了一个配置错误，该错误阻止任何人在没有 Microsoft 身份验证的情况下访问您的服务器。您是否在应用服务上设置了安全性？其他可能导致这种行为的东西？如果你把实际的端点发给我，我可以看看。

【参考方案2】：

使用 https://cors-anywhere.herokuapp.com 将此附加到您的 api

例如：https://cors-anywhere.herokuapp.com/user/list

这是一个公共代理，无法控制谁可以看到数据，不要让代理服务器过载。 最好实现自己的代理，如果无法更改 azure api。

【讨论】：

请注意，截至 2021 年 1 月，cors-anywhere 现在受到高度限制，可能不再是有效的解决方案。 github.com/Rob--W/cors-anywhere/issues/301