Angular 2 AspNetCore WebApi CORS问题:飞行前响应具有无效的HTTP状态代码401 [英] Angular 2 AspNetCore WebApi CORS issue: Response for preflight has invalid HTTP status code 401

问题描述

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

I am attempting to implement simple token based authentication in an Angular 2 RC6 application against an AspNetCore WebApi project that I've implemented in Visual Studio 2015.

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

I have put my sample application on github at: https://github.com/tonywr71/Snazzle which is a fully functioning application.

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

In the application, I click on the Login menu item, put in login and password information then click login.

它成功返回了身份验证令牌，该令牌存储在隔离的存储中.

It successfully returns am authentication token, which I store in isolated storage.

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

I then click on the Fetch Data menu item, it calls a Sample Controller that has an Authorize attribute on it. It passes the token, which is retrieved from isolated storage and added to the header. But it fails with an error.

我遇到的错误是"XMLHttpRequest无法加载 http://localhost:5100/api/SampleData/WeatherForecasts .飞行前响应包含无效的HTTP状态代码401"

The error I am getting is "XMLHttpRequest cannot load http://localhost:5100/api/SampleData/WeatherForecasts. Response for preflight has invalid HTTP status code 401"

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

WeatherForecasts is a WebApi method that returns some json that is consumed by the Angular 2 client component.

401是未经授权的，而获得未经授权的原因则是由于预检ORIGIN调用所致，因为没有为ORIGIN调用发送标头.

401 is unauthorized, and the reason it is getting an unauthorized is due to the preflight ORIGIN call, because headers are not sent for ORIGIN calls.

当我用Postman运行它时，添加令牌后就没有问题-方法调用有效.这是因为Postman不必担心CORS.

When I run it with Postman, there are no issues once the token is added - the method call works. That is because Postman does not need to worry about CORS.

所以我的问题是，我如何才能使AspNetCore不检查ORIGIN调用以进行身份​​验证?还是如果这不是正确的方法，我应该如何实现呢?我应该添加一些中间件吗?

So my question is, how can I get AspNetCore to not check ORIGIN calls for authentication? Or if that's not the correct approach, how am I supposed to achieve this? Is there some middleware that I'm supposed to add?

推荐答案

您将必须在Web api端启用CORS.

You will have to enable CORS on web api side.

要在Web api端启用CORS，您将必须执行以下步骤-

To enabled CORS on web api side, you will have to do these steps-

首先，在project.json中添加依赖项-"Microsoft.AspNetCore.Cors": "1.0.0",

First, add dependency in project.json - "Microsoft.AspNetCore.Cors": "1.0.0",

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

then enable CORS in startup.cs like this-

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

如果您想限制特定的原产地，那么可以这样做-

In case if you want to restrict to specific origin then you can do like this-

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

您可以在此处

看看这是否有帮助.

这篇关于Angular 2 AspNetCore WebApi CORS问题:飞行前响应具有无效的HTTP状态代码401的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！