Angular HTTP拦截器无法读取ASP.NET Core自定义响应头问题排查

自定义响应头无法被Angular拦截器读取，核心是浏览器CORS安全策略默认隐藏所有非基础响应头，前端JS（包括Angular HttpClient）无法直接读取未被服务端显式声明暴露的自定义头。
浏览器默认仅向JS层开放6个基础响应头的读取权限：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。X-AppVersion属于自定义头，不在默认开放列表内，即使服务端正确返回了该头，浏览器也会拦截JS的读取请求——你在F12网络面板可以看到该头，但代码中读取结果始终为null。

1. 服务端配置CORS暴露自定义头（核心修复） #

在ASP.NET Core的服务注册阶段配置CORS策略，明确把X-AppVersion加入暴露头列表；由于你前端开启了withCredentials，CORS策略必须同步开启允许凭证：

// .NET 6 Program.cs顶级语句 或 Startup.cs ConfigureServices方法中添加
builder.Services.AddCors(options =>
{
    options.AddPolicy("SpaPolicy", policy =>
    {
        policy.WithOrigins("http://localhost:4200", "你的生产环境前端域名") // 替换为实际前端访问地址
              .AllowAnyMethod()
              .AllowAnyHeader()
              .AllowCredentials() // 对应前端withCredentials: true配置，必须开启
              .WithExposedHeaders("X-AppVersion"); // 核心配置：声明允许前端读取该自定义头
    });
});

2. 修正中间件顺序，清理冗余配置 #

CORS中间件必须放在所有修改响应、处理静态文件、SPA相关中间件的最前面，否则CORS配置不会生效；同时删除Spa静态文件配置里重复添加X-AppVersion的冗余代码，避免返回重复头：

// Program.cs/Startup.cs Configure方法中，中间件顺序不能随意调整
app.UseCors("SpaPolicy"); // 放在请求管道最靠前位置

// 保留全局添加版本头的中间件即可，用TryAdd避免重复添加头
app.Use(async (context, next) =>
{
   context.Response.Headers.TryAdd("X-AppVersion", Assembly.GetEntryAssembly()!.GetName().Version!.ToString());
   await next();
});

// 其他原有中间件：静态文件、路由、授权等按原有顺序保留

// 修改后的UseSpa配置，删除重复加头的代码
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
    {
        OnPrepareResponse = context =>
        {
            var headers = context.Context.Response.GetTypedHeaders();
            headers.CacheControl = new CacheControlHeaderValue
            {
                NoCache = true,
                NoStore = true,
                MustRevalidate = true,
                MaxAge = TimeSpan.Zero
            };
        }
    };
});

3. 前端代码无需修改 #

当前写的Angular拦截器逻辑完全正确，HTTP头名不区分大小写，resp.headers.get('x-appversion')可以正常匹配服务端返回的X-AppVersion头。服务端配置修改完成重启后，即可正常读取到版本号，后续版本比对、重载提示的逻辑按需求实现即可。

• 如果开发环境用了Angular CLI代理（proxy.conf.json）转发接口请求，默认配置不会拦截自定义头，若读取失败可检查代理配置是否开启了头过滤规则。
• CORS限制是浏览器层面的安全机制，不存在前端侧绕过的方案，必须在服务端完成暴露头配置才能解决问题。

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