Angular 5 + TypeScript读取API响应头X-Token返回null问题求助

我帮你排查下这个问题，你遇到的情况其实是CORS跨域限制导致的，这在前端调用跨域API时特别常见～

为什么会返回null？ #

浏览器的同源策略有个限制：默认只有少数「安全响应头」能被前端JavaScript代码读取，比如Cache-Control、Content-Type这类，而你自定义的X-Token不在这个默认列表里。虽然Chrome开发者工具能看到这个头，但浏览器会阻止前端代码访问它，所以你拿到的就是null。

具体解决步骤 #

1. 后端配置暴露自定义响应头

你需要让后端在响应里添加Access-Control-Expose-Headers头，把X-Token列进去，告诉浏览器允许前端读取这个自定义头。举几个常见后端的配置例子：

• Node.js/Express：

  // 在你的响应处理逻辑里添加
  res.setHeader('Access-Control-Expose-Headers', 'X-Token');
  

• Java Spring Boot：
  可以通过@CrossOrigin注解配置：

  @CrossOrigin(exposedHeaders = "X-Token")
  @GetMapping("/your-api-path")
  public ResponseEntity<?> yourApiMethod() {
      // 业务逻辑...
      return ResponseEntity.ok().header("X-Token", "your-token-value").build();
  }
  

  或者全局配置CorsFilter来统一处理。

2. 前端代码优化（可选但推荐）

你的现有代码逻辑没问题，不过可以把类型写得更严谨，替换any为HttpResponse<any>，这样能获得更好的TypeScript类型提示：

this.currentlyExecuting.request = this.http.request(reqParams.type, reqParams.url, { 
  body: reqParams.body, 
  responseType: 'json', 
  observe: 'response' 
}).subscribe( (_response: HttpResponse<any>) => { 
  const header = _response.headers.get('X-Token'); 
  console.log(header); 
  onComplete(_response.body); 
}, _error => { 
  onComplete({ code: -1, message: Constants.WEBSERVICE_INTERNET_NOT_CONNNECTED }); 
});

验证配置是否生效

修改后端配置后，打开Chrome DevTools的「Network」面板，重新调用API，查看响应头里是否存在Access-Control-Expose-Headers: X-Token，如果有，前端就能正常读取到X-Token的值了。

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