Angular GET请求无法读取x-pagination响应头问题排查

你无法通过Angular代码读取x-pagination响应头，核心原因是浏览器CORS安全策略限制，和Angular本身的请求逻辑无关：

• 浏览器默认仅允许前端JS读取7类基础响应头：Cache-Control、Content-Language、Content-Length、Content-Type、Expires、Last-Modified、Pragma，你当前能正常读取的几个头都在这个默认白名单内。
• 自定义响应头如果后端没有显式配置暴露规则，哪怕你能在浏览器调试面板的Network标签里看到对应字段，JS代码也无权读取。
• 你现有代码里还存在两个笔误：一是模板字符串拼接API地址的写法错误，二是错误给请求头添加了x-pagination字段，这个字段是响应头，不需要在请求里携带。

public getAll(pageNumber: number, pageSize: number){
    // 修正模板字符串拼接错误
    const api: string =  `${this.apiAddress}truckParameters?PageNumber=${pageNumber}&PageSize=${pageSize}`;

    const httpOptions = {
      observe: 'response' as const,
      responseType: 'json' as const
    };
    return this.httpClient.get(api, httpOptions).subscribe(
      (response) => {
        // 兼容头字段大小写写法差异
        const paginationInfo = response.headers.get('x-pagination') ?? response.headers.get('X-Pagination');
        console.info('分页头内容:', paginationInfo ? JSON.parse(paginationInfo) : null);
      }
    );
  }

你必须在WEB Api的跨域配置中，将x-pagination加入Access-Control-Expose-Headers暴露列表，这是解决问题的必要步骤，常见后端配置参考：

• ASP.NET Core 项目：

// Program.cs中的CORS策略配置
builder.Services.AddCors(options =>
{
    options.AddPolicy("CorsPolicy", policy =>
    {
        policy.WithOrigins("你的Angular前端部署地址")
              .AllowAnyMethod()
              .AllowAnyHeader()
              // 关键配置：暴露自定义分页头
              .WithExposedHeaders("x-pagination");
    });
});

• Express/Node.js 项目：

const cors = require('cors');
const corsConfig = {
  origin: "你的Angular前端部署地址",
  // 关键配置：暴露自定义分页头
  exposedHeaders: ["x-pagination"]
}
app.use(cors(corsConfig));

配置完成后重启后端服务，重新发起请求时检查响应头中是否存在Access-Control-Expose-Headers: x-pagination字段，存在即代表配置生效，此时Angular代码即可正常读取分页信息。

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