.NET6+Angular15集成SPA中间件后API请求HPE_HEADER_OVERFLOW错误排查

我正在开发基于.NET 6 + Angular 15的Web应用，通过SPA中间件将两者整合在同一.NET解决方案中。目前调用API（无论从应用还是Swagger发起）时出现异常：请求耗时极长，最终返回HTTP 500错误，.NET控制台报错如下：

[webpack-dev-server] [HPM] Error occurred while proxying request localhost:52432/api/client/ClientCareCategory/GetAll to https://localhost:44386/ [HPE_HEADER_OVERFLOW]

查看响应头发现内容异常，例如：

x-powered-by: Express, ASP.NET, ASP.NET, ASP.NET, ASP.NET, ASP.NET, ASP.NET, ASP.NET, ASP.NET, ASP.NET, ASP.NET, ASP.NET, ASP.NET.......

即使自定义头（如X-XSS-Protection、X-Content-Type-Options）也会出现重复内容，推测这是导致HPE_HEADER_OVERFLOW错误的原因，但尚未找到根源。

已尝试的排查步骤 #

• 移除自定义中间件
• 检查自定义中间件代码
• 排查Angular应用配置
• 搜索所用版本（.NET 6、Angular 15、Node 18）的已知问题

但问题仍未解决。

相关配置代码 #

Program.cs（已移除DbContext、服务及仓储代码） #

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddCors(options => 
    options.AddPolicy("Default", policyBuilder =>
    {
        policyBuilder
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader();
    })
);

builder.Services.AddControllers();
builder.Services.AddAuthentication(x =>
{
    x.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    x.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
}).AddJwtBearer(o =>
{
    o.SaveToken = true;
    o.TokenValidationParameters = new TokenValidationParameters
    {
        ValidateIssuer = false,
        ValidateAudience = false,
        ValidateIssuerSigningKey = true,
        IssuerSigningKey = new SymmetricSecurityKey(
            Encoding.UTF8.GetBytes(
                builder.Configuration
                    .GetSection(ApplicationSettings.Section)
                    .GetValue<string>("JWT:Secret")))
    };
});

builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/dist";
});

builder.Services.AddSwaggerGen(config =>
{
    config.SwaggerDoc("Backend", new OpenApiInfo { Title = "Backend", Version = "0.1"});

    config.AddSecurityDefinition("Bearer", new OpenApiSecurityScheme
    {
        In = ParameterLocation.Header,
        Description = "Please enter a valid token",
        Name = "Authorization",
        Type = SecuritySchemeType.Http,
        BearerFormat = "JWT",
        Scheme = "Bearer"
    });

    var securityRequirement = new OpenApiSecurityRequirement
    {
        {
            new OpenApiSecurityScheme
            {
                Reference = new OpenApiReference
                {
                    Type = ReferenceType.SecurityScheme,
                    Id = "Bearer"
                }
            },
            Array.Empty<string>()
        }
    };

    config.AddSecurityRequirement(securityRequirement);
});

var app = builder.Build();

app.UseMiddleware<ExceptionHandlerMiddleware>();
app.UseMiddleware<JwtMiddleware>();
app.UseMiddleware<AntiXssMiddleware>();

app.UseRouting();

app.UseCors("Default");

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

app.MapControllers();   

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI(options =>
    {
        options.SwaggerEndpoint("/swagger/Backend/swagger.json", "Backend");
    });

    app.UseStaticFiles();
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";
        spa.UseAngularCliServer(npmScript: "start");
    });
}
else
{
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseSpaStaticFiles();

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";
        spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(Path.Combine(app.Environment.ContentRootPath, "ClientApp", "dist")),
            RequestPath = ""
        };
    });
}

app.Run();

Angular配置 #

package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run Institut:server:dev",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
},

angular.json

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        "browserTarget": "Institut:build",
        "proxyConfig": "src/proxy.conf.json"
    },
    "configurations": {
        "production": {
            "browserTarget": "Institut:build:production"
        },
        "development": {
            "browserTarget": "Institut:build:development"
        }
    },
    "defaultConfiguration": "development"
},

proxy.conf.json

{
  "/api": {
    "target": "https://localhost:44386",
    "secure": false
  }
}

补充信息 #

尝试了微软官方的.NET + Angular模板，本地运行正常，问题仅在配置SPA中间件后出现。

我的配置是否存在问题？还有哪些未排查的方向？

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