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

Question

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

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

在应用程序中,我单击Login菜单项,输入登录名和密码信息,然后单击login.

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

然后,我单击Fetch Data菜单项,它调用一个具有Authorize属性的Sample Controller.它传递令牌,该令牌从隔离存储中检索并添加到标头中.但它失败并出现错误.

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

WeatherForecasts是一个WebApi方法,它返回Angular 2客户端组件使用的一些json.

401是未经授权的,并且它未经授权的原因是由于预检ORIGIN呼叫,因为没有为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的更多信息

看看这是否有帮助.