Angular 2：HttpResponse返回的HttpHeaders被截断，如何解决？

我之前也踩过一模一样的坑！这事儿本质是浏览器的CORS安全限制在搞鬼——Postman这类工具不受CORS规则约束，所以能看到所有响应头，但Angular的HttpClient会被浏览器过滤掉那些服务器没明确允许跨域暴露的头。

问题根源 #

浏览器的CORS机制默认只允许前端访问「简单响应头」，包括：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。其他自定义头或者非简单头（比如Authorization、X-Total-Count、Link等），必须由服务器明确配置允许暴露，前端才能拿到。

解决方案分两步走： #

1. 配置Rails服务器的CORS暴露头

找到Rails项目里的CORS配置文件 config/initializers/cors.rb，修改配置，添加expose选项，把你需要前端能访问的响应头列进去：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'your-frontend-domain.com' # 生产环境一定要指定具体域名，别用*
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      expose: ['X-Total-Count', 'Link', 'Authorization'] # 替换成你实际需要的响应头
  end
end

修改完后重启Rails服务器，让配置生效。

2. Angular端正确获取响应头

你已经在getHttpOptions()里设置了observe: 'response'，这部分是对的，这样才能拿到完整的HttpResponse对象。注意获取头的时候要使用headers.get('Header-Name')方法，而不是直接遍历（因为CORS限制，非暴露头不会出现在可枚举的属性里）：

// 调用EntryResource的get方法时
this.entryResource.get().subscribe((response: HttpResponse<any>) => {
  // 示例：获取自定义头X-Total-Count
  const totalCount = response.headers.get('X-Total-Count');
  console.log('总条目数:', totalCount);
  
  // 获取其他头同理
  const authHeader = response.headers.get('Authorization');
});

额外排查小技巧 #

• 用curl命令验证服务器确实返回了目标头：

  curl -v https://your-server.example.com/v2/entries
  

  看输出里的<开头的响应头部分，确认你需要的头存在。
• 检查浏览器控制台的Network面板，看OPTIONS预检请求的响应头里有没有Access-Control-Expose-Headers，并且值包含你需要的头。

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