Angular 2 AspNetCore WebApi CORS 问题：预检响应具有无效的 HTTP 状态代码 401

Question

我正在尝试在 Angular 2 RC6 应用程序中针对我在 Visual Studio 2015 年实施的 AspNetCore WebApi 项目实施简单的基于令牌的身份验证。

我已将示例应用程序放在 github 上：https://github.com/tonywr71/Snazzle，这是一个功能齐全的应用程序。

在应用程序中，我点击登录菜单项，输入登录名和密码信息，然后点击登录。

它成功returns 是身份验证令牌，我将其存储在隔离存储中。

然后我单击 Fetch Data 菜单项，它会调用一个具有 Authorize 属性的 Sample Controller。它传递从隔离存储中检索并添加到 header 的令牌。但它因错误而失败。

我收到的错误是 "XMLHttpRequest cannot load http://localhost:5100/api/SampleData/WeatherForecasts. Response for preflight has invalid HTTP status code 401"

WeatherForecasts 是一种 WebApi 方法，returns 一些 json 被 Angular 2 客户端组件使用。

401 未经授权，它获得未经授权的原因是飞行前的 ORIGIN 调用，因为 header 没有为 ORIGIN 调用发送。

当我使用 Postman 运行时，添加令牌后就没有问题 - 方法调用有效。那是因为Postman不需要担心CORS。

所以我的问题是，如何让 AspNetCore 不检查 ORIGIN 调用以进行身份验证？或者，如果这不是正确的方法，我应该如何实现这一目标？我应该添加一些中间件吗？

Answer 1

您必须在 Web api 端启用 CORS。

要在 Web api 端启用 CORS，您必须执行这些步骤-

首先在project.json-"Microsoft.AspNetCore.Cors": "1.0.0",

添加依赖

然后像这样在 startup.cs 中启用 CORS-

app.UseCors(builder => {
    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
});

如果你想限制特定来源，那么你可以这样做-

 app.UseCors(builder => builder.WithOrigins("example.com"));

您可以找到有关 CORS 的更多信息here

看看这是否有帮助。

Answer 2

这对我有帮助：

转到Startup.cs文件

在您的 ConfigureServices(IServiceCollection services) 函数中添加以下内容

 services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());
        });

这在您的 Configure(IApplicationBuilder app) 函数中：

 app.UseCors("CorsPolicy");

Angular 2 AspNetCore WebApi CORS 问题：预检响应具有无效的 HTTP 状态代码 401

Angular 2 AspNetCore WebApi CORS issue: Response for preflight has invalid HTTP status code 401

asp.net-web-api2

asp.net-core

asp.net-core-middleware

asp.net-core-webapi

angular