Angular4项目中不关闭浏览器安全，如何读取响应头令牌？

嘿，这个问题我之前在项目里也踩过坑，本质是浏览器的CORS安全限制在起作用，跟Angular本身没啥关系！

问题根源 #

浏览器出于跨域安全考虑，默认只允许前端访问「CORS安全列表内的响应头」，比如Content-Type、Cache-Control这类。如果你的REST API返回了自定义头（比如Authorization、X-Auth-Token）或者非安全列表里的标准头，浏览器会直接把这些头隐藏起来，不让前端读取——除非后端明确告诉浏览器：「这些头可以暴露给前端」。

具体解决方案 #

你需要在后端的API响应中添加Access-Control-Expose-Headers这个响应头，把需要前端读取的头字段列出来（多个字段用逗号分隔）。给你几个常见后端框架的配置例子：

• Node.js/Express：

  app.post('/login', (req, res) => {
    // 处理登录逻辑...
    res.header('Access-Control-Expose-Headers', 'Authorization, X-User-ID'); // 暴露需要的头
    res.status(200).json({ success: true });
  });
  

• Spring Boot：
  可以用@CrossOrigin注解直接配置：

  @CrossOrigin(allowedHeaders = "*", exposedHeaders = {"Authorization", "X-User-ID"})
  @PostMapping("/login")
  public ResponseEntity<?> login(@RequestBody LoginRequest request) {
    // 登录逻辑...
    HttpHeaders headers = new HttpHeaders();
    headers.add("Authorization", "Bearer " + token);
    return new ResponseEntity<>(successBody, headers, HttpStatus.OK);
  }
  

  也可以通过全局CorsFilter配置，效果是一样的。

等后端配置好之后，Angular这边不需要改任何代码，就能正常读取响应头了：

this.http.post('/api/login', loginData, { observe: 'response' })
  .subscribe(response => {
    const authToken = response.headers.get('Authorization');
    const userId = response.headers.get('X-User-ID');
    // 处理拿到的头信息...
  });

为什么关闭浏览器安全能行？ #

关闭浏览器安全模式（比如Chrome加--disable-web-security参数）会直接绕过CORS的所有检查，浏览器就不会限制你读取任何响应头了，但这只是开发时的临时测试手段，绝对不能用于生产环境——生产环境必须靠后端配置Access-Control-Expose-Headers来解决。

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