Blazor HttpClient无法获取响应中自定义X-Pagination头的问题

核心问题 #

浏览器的CORS安全机制默认只允许前端访问标准响应头（如Cache-Control、Content-Type），自定义头（比如你的X-Pagination）必须在API的CORS配置中显式声明为「可暴露」，否则哪怕DevTools能看到完整响应头，前端Blazor应用也无法通过HttpClient获取到。

具体修复步骤 #

1. 修改API的CORS配置 #

以ASP.NET Core为例，在CORS策略中添加WithExposedHeaders来指定要暴露的自定义头：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader()
              // 关键配置：暴露X-Pagination自定义头
              .WithExposedHeaders("X-Pagination");
    });
});

记得在中间件中启用该策略：

app.UseCors("AllowAll");

如果是其他后端框架，找到对应的CORS配置项，添加自定义头的暴露声明即可。

2. 前端验证修改 #

重启API和Blazor应用后，即可正常读取自定义头：

if (response.Headers.TryGetValues("X-Pagination", out var values))
{
    var paginationJson = values.FirstOrDefault();
    // 可将JSON字符串反序列化为分页模型
    // var pagination = JsonSerializer.Deserialize<PaginationModel>(paginationJson);
}

补充说明 #

• DevTools能看到头但前端拿不到的原因：DevTools直接读取服务器返回的完整响应，而浏览器会通过CORS规则过滤未被显式暴露的自定义头，禁止前端代码访问。
• 多个自定义头需要暴露时，可添加多个参数：.WithExposedHeaders("X-Pagination", "X-Custom-Another")

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