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

您必须在网络API端启用CORS。

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

首先，在project.json中添加依赖项 - $scope.addHotel=function(hotel){ //undefiend console.log(hotel); }

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

"Microsoft.AspNetCore.Cors": "1.0.0",

如果您想限制为特定原点，那么您可以这样做 -

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

您可以找到有关CORS here

的更多信息

看看这是否有帮助。

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

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

2 个答案: