ASP.NET Core对接Angular前端出现CORS错误无法接收后端数据如何解决

API 探路者

2026-10-4

问题修复方案

1. 修正Origin地址的末尾斜杠
  修改Configure方法里的UseCors配置，把"http://localhost:4200/"末尾的斜杠删除，ASP.NET Core的CORS Origin匹配为严格校验，多余的斜杠会导致匹配失败：
```
app.UseCors(options =>
  options.WithOrigins("http://localhost:4200")
  .AllowAnyMethod()
  .AllowAnyHeader());
```

调整CORS中间件的顺序
ASP.NET Core 3.0+的中间件执行顺序有严格要求，UseCors必须放在UseRouting之后、UseEndpoints之前，你当前把UseCors放在了最开头，无法和路由系统匹配导致不生效，调整后的完整配置如下：

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

    app.UseHttpsRedirection();
    app.UseStaticFiles();
    if (!env.IsDevelopment())
    {
        app.UseSpaStaticFiles();
    }

    app.UseRouting();

    // 修正位置后的CORS中间件
    app.UseCors(options =>
    options.WithOrigins("http://localhost:4200")
    .AllowAnyMethod()
    .AllowAnyHeader());

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller}/{action=Index}/{id?}")
        // 全局为控制器端点启用CORS
        .RequireCors();
    });

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";
        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start");
        }
    });
}