Angular 5 HttpClient无法获取响应头Location字段求助

我之前也碰到过一模一样的问题，其实这不是Angular的问题，核心原因是CORS（跨域资源共享）的安全限制在搞鬼。

问题根源解释 #

当你发起跨域请求时，浏览器会默认只允许前端JS代码访问简单响应头（比如Content-Type、Cache-Control这类）。像Location这种属于非简单响应头，必须由后端服务器主动通过Access-Control-Expose-Headers响应头把它"暴露"出来，前端才能读取到。

你在Chrome网络面板能看到Location字段，是因为浏览器本身能捕获到所有响应头，但出于安全规范，会限制JS只能访问被服务器明确授权的头信息。

具体解决方案 #

1. 后端服务器配置（最关键步骤）

你的后端看起来是Java JAX-RS服务，需要在接口的响应中添加Access-Control-Expose-Headers头，指定要暴露的Location字段：

@POST
@Path("/report/{id}/params/")
public Response yourReportParamMethod() {
    // 这里是你的业务逻辑
    String locationValue = "你要返回的Location路径";
    
    return Response.ok()
        .header("Location", locationValue)
        .header("Access-Control-Expose-Headers", "Location") // 重点：暴露Location头
        .build();
}

如果是其他后端框架，思路完全一致——只要在响应中添加Access-Control-Expose-Headers: Location即可。

2. Angular端代码验证

你的Angular代码已经正确设置了observe: 'response'（这是获取完整响应对象的必要配置），服务器配置完成后，就可以直接读取头信息了：

this.http.post(url, {}, { headers: headers, observe: 'response' })
  .subscribe(res => {
    console.log(res.headers.get('Location')); // 现在就能正常拿到值了
  });

额外小提示 #

如果需要暴露多个非简单响应头，可以用逗号分隔字段：

.header("Access-Control-Expose-Headers", "Location, X-Custom-Header, X-Another-Header")

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