当超文本传输协议从角6发布到. netcore 2.0 webapi时，交叉起源请求被阻止

Question

我正在尝试对angular 6应用程序使用Jwt身份验证。尽管我将cors中间件添加到了我的应用程序中。netcore 2 webapi我反复出现以下错误：

"阻止跨源请求：相同源策略禁止读取http://localhost:5000/api/auth/login.的远程资源（原因：CORS请求未成功）。"

Angular6超文本传输协议：

浏览器cors错误指示：

Cors中间件在。netcore2 webapi：

后角超文本传输协议

export class LoginComponent {
  invalidLogin: boolean;

  constructor(private router: Router, private http: HttpClient) { }

  login(form: NgForm) {
    let credentials = JSON.stringify(form.value);
    this.http.post("http://localhost:5000/api/auth/login", credentials, {
      headers: new HttpHeaders({
        "Content-Type": "application/json"
      })
    }).subscribe(response => {
      let token = (<any>response).token;
      localStorage.setItem("jwt", token);
      this.invalidLogin = false;
      this.router.navigate([""]);
    }, err => {
      this.invalidLogin = true;
    });
  }
}

Cors中间件正在启动中。cs文件

 public void ConfigureServices(IServiceCollection services)
            {
               services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
                    .AddJwtBearer(options =>
                    {
                        options.TokenValidationParameters = new TokenValidationParameters
                        {
                            ValidateIssuer = true,
                            ValidateAudience = true,
                            ValidateLifetime = true,
                            ValidateIssuerSigningKey = true,

                            ValidIssuer = "http://localhost:5000",
                            ValidAudience = "http://localhost:5000",
                            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("superSecretKey@345"))
                        };
                    }); 

services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

                 services.AddCors(cfg=>cfg.AddPolicy("ClientDomain",builder=>builder.WithOrigins("http://localhost:4200")));
            }


            public void Configure(IApplicationBuilder app,IHostingEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseHsts();
                }

                app.UseHttpsRedirection();
                app.UseAuthentication();
                app.UseCors("ClientDomain");
                app.UseMvc();
            }
        }

Answer 1

您需要做的只是：

1） 安装Microsoft软件包。AspNetCore。努吉的科尔斯

2）放代码服务。Startup.cs的配置服务（）方法中的addCors（）

3） 输入代码

app.UseCors（构建器=

在启动的Configure（）方法中。在http重定向和身份验证（如果有）之前进行cs。

Answer 2

public void ConfigureServices(IServiceCollection services)
{
 services.AddCors(options =>
            {
                options.AddPolicy("AllowAll", p =>
                {
                    p.AllowAnyOrigin()
                        .AllowAnyHeader()
                        .AllowAnyMethod();
                });
            });
}


public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{

  app.UseCors("AllowAll");
}

Answer 3

问题似乎是您正在发送一个HTTP请求，但是您的Cors中间件在管道中注册较晚，并且从未在HTTP请求上调用，因为

app.UseHttpsRedirection();
app.UseAuthentication();

换句话说：当您的请求在http上时，UseHttpsRedirection中间件将使管道短路，并在飞行前返回一个响应，而不包含所需的CORS头。如果您通过https进行操作，但用户未经授权，则同样适用。

为了允许CORS超文本传输协议（或重定向之前）和未经授权的用户，您必须在上面的行之前注册中间件

// now CORS is handled before https redirection & before authentication
app.UseCors("ClientDomain");
app.UseHttpsRedirection();
app.UseAuthentication();
app.UseMvc();

始终记住，中间件是按照它们的注册顺序调用的（UseXxx调用）。

琐事：当您获得任何中间件的异常时，异常中间件将清除标题。因此，抛出异常的方法将不包含cors头，即使cors中间件注册是正确的