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

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

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

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

它成功返回身份验证令牌，我将其存储在独立存储中。

然后，我单击“获取数据”菜单项，它会调用一个具有“授权”属性的示例控制器。它传递令牌，该令牌从独立存储中检索并添加到标头中。但它因错误而失败。

我收到的错误是“XMLHttpRequest 无法加载http://localhost:5100/api/SampleData/WeatherForecasts http://localhost:5100/api/SampleData/WeatherForecasts。预检响应具有无效的 HTTP 状态代码 401”

Weather Forecasts 是一个 Web Api 方法，它返回 Angular 2 客户端组件使用的一些 json。

401 未经授权，其获得未经授权的原因是由于预检 ORIGIN 调用，因为不会为 ORIGIN 调用发送标头。

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

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

您必须在 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 https://docs.asp.net/en/latest/security/cors.html

看看这是否有帮助。