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

Question

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

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

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

它成功返回我存储在隔离存储中的身份验证 token 。

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

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

WeatherForecasts 是一种 WebApi 方法，它返回一些由 Angular 2 客户端组件使用的 json。

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

当我使用 Postman 运行它时，添加 token 后没有任何问题 - 方法调用有效。那是因为 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

看看这是否有帮助。