反应js请求和jwt的cors问题答案

【问题标题】：cors problem with react js request and jwt反应js请求和jwt的cors问题
【发布时间】：2020-11-30 20:18:18
【问题描述】：

我正在尝试从 asp.net core 3.1 获取数据，因此我使用请求登录并获取 jwt 令牌。之后我想发送一个从 api 获取数据的请求，但它导致“预检请求”从源 'http://localhost:3000' 获取在 'https://localhost:44328/Address' 的访问已被阻止CORS 策略：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。 apiAddress.js:24 GET https://localhost:44328/Address net::ERR_FAILED"，我使用 Visual Studio localhost 作为 api 服务器并配置启动如下：

     //in ConfigureServices
        services.AddCors(options =>
        {
            options.AddPolicy(name: AllowedOrigins,
                              builder =>
                              {
                                  builder
                                        .AllowAnyOrigin()
                                        .AllowAnyMethod()
                                        .AllowAnyHeader()
                                        .SetIsOriginAllowed(hostName => true);

                              });
        });
//in configure
    app.UseCors(AllowedOrigins);

我的 fetch 请求在 reactjs 中如下所示：

    const response = await fetch(url, {
        'method': 'GET',
        'mode': 'cors',
        'credentials': 'include',
        'headers': {
            'Content-Type': 'application/json; charset=utf-8;',
            //'Content-Type':'application/x-www-form-urlencoded',
            'Authorization':`bearer ${token}`
        }
    });

最后我的控制器如下所示：

[ApiController, EnableCors("AllowedOrigins"), Authorize,  Route("[controller]")]
public class AddressController : ControllerBase

出了什么问题，我必须提到没有 [Authorize] 属性的其他操作可以正常工作，但是带有它的操作不起作用？！有人提到我应该在 iis 中启用选项，但没有解释如何？

【问题讨论】：

你的网址在package.json的代理中，还是你把它写成一个字符串在ajax帖子里？
'Authorization':bearer ${token}`` 这会触发 CORS 预检。我们可以在不触发 CORS 的情况下使用的标头和值非常具体。（Authorization 不是其中之一）
我把它写成变量中的字符串
那我该怎么办

标签： reactjs asp.net-core cors preflight

【解决方案1】：

您可能需要在 IIS 上启用 CORS。以下是操作步骤。

打开 Internet 信息服务 (IIS) 管理器。
右键单击要为其启用 CORS 的站点，然后转到“属性”。
切换到 HTTP 标头选项卡。
在“自定义 HTTP 标头”部分中，单击“添加”。
输入 Access-Control-Allow-Origin 作为标题名称。
输入 * 作为标题值。
点击确定两次。

【讨论】：

我正在使用本地主机和其他操作正常，除了带有授权过滤器的操作，这对您的答案有什么影响吗？想
访问从源 'localhost:3000' 获取在 'localhost:44328/Address' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow -Origin' 标头存在于请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。 apiAddress.js:24 GET localhost:44328/Address net::ERR_FAILED

【解决方案2】：

对预检请求的响应未通过访问控制检查：....

没有 [Authorize] 属性的其他操作可以正常工作，但带有它的操作不起作用

在this doc，你会发现：

CORS 预检请求用于确定所请求的资源是否设置为由服务器跨源共享。并且 OPTIONS 请求始终是匿名的，如果未启用匿名身份验证，服务器将无法正确响应预检请求。

在 IIS 服务器上托管时，您可以尝试安装 IIS CORS module 并配置站点/应用程序以使其正常运行。

此外，如果您想通过 IIS express 使其在本地工作，为了在 CORS 上进行测试，您可以尝试允许匿名访问。

或者使用 kestrel 运行它并编写自定义中间件以正确响应预检请求。

【讨论】：