Angular 2 AspNetCore WebApi CORS问题:preflight的响应有无效的HTTP状态码40

Question

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

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

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

它成功返回一个身份验证令牌，我将其存储在隔离存储中。

然后点击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不检查原点调用身份验证?或者，如果这不是正确的方法，我该如何做到这一点?我应该添加一些中间件吗?

Answer 1

你必须在web api端启用CORS。

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

首先，在项目中添加依赖项。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的信息

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");