Question

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

从原点“ 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”（从“ https://mywebsite.azurewebsites.net”重定向）的访问已被CORS策略阻止：没有“访问控制允许来源”标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”以在禁用CORS的情况下获取资源。

我通过搜索错误消息来研究问题，我发现了几篇文章，但对于在最佳实践中也是安全的React应用程序中的确切操作并没有具体说明。

我在提取中添加了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);
            });
};

添加标题没有任何改变，错误仍然存在。我想确保自己正确执行此操作，有人可以帮助我解决此错误吗？

Answer 1

adalProvider.init({ instance: 'https://login.microsoftonline.com/', tenant: 'xxxxxxxx.onmicrosoft.com', clientId: 'xxxxxxxxxxxxxxxxxxxxx', popUp: false, }, $httpProvider );是响应头。它只能由服务器设置。服务器确定是否接受跨站点请求，在这种情况下，服务器拒绝。没办法解决。

您似乎正在尝试访问Azure服务器，但它会重定向到Microsoft登录页面。确保发出请求时可以在没有重定向的情况下访问服务器。另外，请确保您的JavaScript代码在同一域上运行（我认为是这样），否则请在Web服务器上配置CORS：https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2

Answer 2

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

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

这是一个公共代理，不能控制谁可以看到数据，也不会使代理服务器超载。 最好实现自己的代理（如果无法更改Azure API）。

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

2 个答案: