如何配置Angular HttpClient请求URL最大长度避免.NET Core后端CORS错误

问题本质 #

你遇到的CORS报错属于表象问题：实际是.NET Core的运行宿主（Kestrel/IIS）默认限制了URL最大长度，超长URL请求被宿主提前拦截返回400/414错误，这个错误响应没有带上你配置的CORS头，浏览器同源校验失败才会抛出CORS错误。

配置方法 #

场景1：使用Kestrel直接运行（开发环境/自托管部署） #

修改Program.cs配置，增加Kestrel的URL长度限制即可：

// .NET 6+ 顶层语句示例
var builder = WebApplication.CreateBuilder(args);
builder.WebHost.ConfigureKestrel(options =>
{
    options.Limits.MaxRequestLineSize = 8192; // 最大请求行长度，单位字节，按需调整
    options.Limits.MaxRequestHeadersTotalSize = 16384; // 最大请求头总大小
});

// 原有AddCors等其他配置保持不变
builder.Services.AddCors(options =>
{
    options.AddPolicy("MyPolicy",
        builder =>
            builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()); 
});

如果是.NET Core 3.1版本，在Program.cs的CreateHostBuilder方法中添加配置：

public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
        {
            webBuilder.ConfigureKestrel(options =>
            {
                options.Limits.MaxRequestLineSize = 8192;
                options.Limits.MaxRequestHeadersTotalSize = 16384;
            });
            webBuilder.UseStartup<Startup>();
        });

场景2：使用IIS托管部署 #

需要在项目根目录添加web.config文件，配置IIS的URL长度限制：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <security>
      <requestFiltering>
        <!-- 最大URL、查询字符串长度，单位字节，按需调整 -->
        <requestLimits maxUrl="8192" maxQueryString="4096" />
      </requestFiltering>
    </security>
  </system.webServer>
  <system.web>
    <!-- 兼容旧版本配置，maxUrlLength单位为KB -->
    <httpRuntime maxUrlLength="8" maxQueryStringLength="4" />
  </system.web>
</configuration>

更推荐的优化方案 #

GET请求本身不适合携带大量参数，你当前把序列化后的JSON直接拼在URL里的用法不符合规范，建议改为POST请求，把参数放到请求体中传输，完全规避URL长度限制问题：

前端Angular代码修改 #

// customer.service.ts 修改后的请求代码
getCustomerData(): Observable<ICustomerReturn[]> {
  const custData = {
      customerName: "John-SuperDuperReally Incredibly Long Name so we just call him john!",
      customerAddress: "1234567890\\SouthEastWestMain&NotSoMainStreet",
      customerCityState: "Providence, State of Rhode Island and Providence Plantations",
      customerZipCode: "02901"
  }
  // 不需要再编码拼入URL，直接作为POST请求的body参数
  return this.httpClient
    .post<ICustomerReturn[]>(`https://localhost:44444/api/Customer/GetData/`, custData) 
    .pipe(
      tap(_ => console.log('got data')),
    );
};

后端.NET Core控制器修改 #

给接口方法加上[HttpPost]特性，参数加上[FromBody]特性：

[ApiController]
[Route("api/[controller]")]
public class CustomerController : ControllerBase
{
    [HttpPost("GetData")]
    public IActionResult GetData([FromBody] CustDataDto custData)
    {
        // 原有业务逻辑保持不变
    }
}

// 新增对应的参数接收DTO
public class CustDataDto
{
    public string CustomerName { get; set; }
    public string CustomerAddress { get; set; }
    public string CustomerCityState { get; set; }
    public string CustomerZipCode { get; set; }
}

内容的提问来源于stack exchange，提问作者user8149311