使用.NET Core和Angular Client，即使在启用它后，CORS错误仍会继续发生 [英] CORS error keep happening even after enabling it, with .NET Core and Angular Client

问题描述

我有.net Core 3.0 Web API项目，该项目已按如下所示启用了CORS：

ConfigureService

  services.AddCors（options => 
 {
 options.AddPolicy（ AllowOrigin，builder => builder.AllowAnyOrigin （））; 
}）； 
  

然后在配置方法中

app.UseCors（）;

每当我使用角度应用程序中的httpclient调用此端点时，都会收到CORS错误。

我可以看到标题如下：

我想在我的计算机中添加CORS

更新：

添加配置和配置服务代码：

  public void ConfigureServices（IServiceCollection服务）
 {
 services.AddControllers（）; 
 
 services.AddDbContext< LabSoftwareContext>（options => options.UseSqlServer（Configuration.GetConnectionString（ LabDatabase）））;; 
 
 services.AddSwaggerGen（c => 
 {
 c.SwaggerDoc（ v1，新的OpenApiInfo 
 {
版本= v1， 
标题=实验室API，
说明=实验室软件API 
}）; 
}）; 
 
 services.Configure< IISServerOptions>（options => 
 {
 options.AutomaticAuthentication = false; 
}）; 
 
 services.AddCors（options => 
 {
 options.AddPolicy（ AllowOrigin，builder => builder.AllowAnyOrigin（）。AllowAnyHeader（）。AllowAnyMethod（） ）; 
}）; 
} 
 
 
 public void Configure（IApplicationBuilder app，IWebHostEnvironment env）
 {
 if（env.IsDevelopment（））
 {
 app.UseDeveloperExceptionPage（）; 
} 
 
 app.UseCors（ AllowOrigin）; 
 
 app.UseHttpsRedirection（）; 
 
 app.UseRouting（）; 
 
 app.UseAuthorization（）; 
 
 app.UseEndpoints（endpoints => 
 {
 endpoints.MapControllers（）; 
}）; 
 
应用程序。UseSwagger（）; 
 
 app.UseSwaggerUI（c => 
 {
 c.SwaggerEndpoint（ / swagger / v1 / swagger.json，实验室软件API）; 
}）; 
} 
  

解决方案

我认为这是您的中间件在 Configure（）中的顺序-如果顺序不正确，则可能导致意外的Cors故障。

<例我认为 UseCors（）可能需要放在 UseHttpsRedirection（）

$ b之后$ b

这里有一个（复杂！）表来解释中间件的顺序： https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/middleware/?view=aspnetcore-3.1#built-in-中间件

根据同一页面上的示例修改的代码：

  public void Configure（IApplicationBuilder应用程序，IWebHostEnvironment env）
 {
 if（env.IsDevelopment（））
 {
 app.UseDeveloperExceptionPage（）; 
} 
其他
 {
 app.UseExceptionHandler（ / Error）; 
 app.UseHsts（）; 
} 
 
 app.UseHttpsRedirection（）; 
 
 app.UseRouting（）; 
 app.UseCors（）; 
 
 app.UseAuthentication（）; 
 app.UseAuthorization（）; 
 
 app.UseEndpoints（endpoints => 
 {
 endpoints.MapControllers（）; 
}）; 
 
应用程序。UseSwagger（）; 
 
 app.UseSwaggerUI（c => 
 {
 c.SwaggerEndpoint（ / swagger / v1 / swagger.json，实验室软件API）; 
}）; 
} 
  

I have .net Core 3.0 Web API project where I have enabled the CORS as given:

ConfigureService

services.AddCors(options =>
{
  options.AddPolicy("AllowOrigin", builder => builder.AllowAnyOrigin());
});

And in Configure method

app.UseCors();

And when ever I call this end point using httpclient from angular application I get CORS error.

And I can see the headers as in :

I thought adding the CORS in my startup should have solved this issue.

UPDATE:

Adding Configure and Configure Service Code:

public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllers();

        services.AddDbContext<LabSoftwareContext>(options => options.UseSqlServer(Configuration.GetConnectionString("LabDatabase")));

        services.AddSwaggerGen(c =>
        {
            c.SwaggerDoc("v1", new OpenApiInfo
            {
                Version = "v1",
                Title = "Lab API",
                Description = "Lab Software APIs"
            });
        });

        services.Configure<IISServerOptions>(options =>
        {
            options.AutomaticAuthentication = false;
        });

        services.AddCors(options =>
        {
            options.AddPolicy("AllowOrigin", builder => builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
        });
    }


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

        app.UseCors("AllowOrigin");

        app.UseHttpsRedirection();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });

        app.UseSwagger();

        app.UseSwaggerUI(c =>
        {
            c.SwaggerEndpoint("/swagger/v1/swagger.json", "Lab Software API");
        });
    }

解决方案

I think the root cause of this is the order of your middleware in Configure() - if the order is incorrect it can cause unexpected Cors failures.

e.g. I think UseCors() might need to be placed after UseHttpsRedirection()

There is a (complex!) table explaining the ordering of middleware here: https://docs.microsoft.com/en-us/aspnet/core/fundamentals/middleware/?view=aspnetcore-3.1#built-in-middleware

Your code modified according to the example from the same page:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();

    app.UseRouting();
    app.UseCors();

    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });

    app.UseSwagger();

    app.UseSwaggerUI(c =>
    {
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "Lab Software API");
    });
}

这篇关于使用.NET Core和Angular Client，即使在启用它后，CORS错误仍会继续发生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！