Angular 4如何读取REST服务响应头中的JWT Token？

嘿，别着急！作为Angular新手，遇到拿不到响应头里JWT的问题太正常了，我来一步步帮你解决～

首先你得明确：默认情况下Angular的HttpClient只会返回响应体，要拿到包含响应头的完整HTTP对象，得先调整请求配置，另外还有个容易踩坑的CORS限制需要后端配合处理。

第一步：调整Angular请求代码，获取完整响应 #

在你的请求中添加observe: 'response'选项，这样就能拿到包含响应头的HttpResponse对象。举个登录请求的示例：

import { HttpClient, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {
  constructor(private http: HttpClient) {}

  login(credentials: { username: string; password: string }) {
    this.http.post('/api/auth/login', credentials, { observe: 'response' })
      .subscribe((response: HttpResponse<any>) => {
        // 替换成你实际的Token头字段名，比如Token、Authorization等
        const jwtToken = response.headers.get('Token');
        
        if (jwtToken) {
          // 把Token存到localStorage或者状态管理工具里
          localStorage.setItem('authToken', jwtToken);
          console.log('成功获取Token:', jwtToken);
        } else {
          console.log('响应头里未找到Token，请检查字段名是否正确');
        }
      });
  }
}

第二步：关键！后端配置CORS暴露自定义头 #

这是很多新手忽略的点：浏览器的CORS策略会阻止前端访问非标准响应头，除非后端明确通过Access-Control-Expose-Headers头暴露它。

给你几个常见后端的配置示例：

• Spring Boot（Java）：

  @PostMapping("/api/auth/login")
  public ResponseEntity<?> login(@RequestBody LoginRequest request) {
    String jwtToken = generateJwtToken(request);
    HttpHeaders headers = new HttpHeaders();
    headers.set("Token", jwtToken);
    // 暴露自定义Token头给前端
    headers.set("Access-Control-Expose-Headers", "Token");
    return new ResponseEntity<>("登录成功", headers, HttpStatus.OK);
  }
  

• Node.js/Express：

  app.post('/api/auth/login', (req, res) => {
    const jwtToken = generateJwtToken(req.body);
    res.setHeader('Token', jwtToken);
    // 允许前端访问Token头
    res.setHeader('Access-Control-Expose-Headers', 'Token');
    res.status(200).send({ message: '登录成功' });
  });
  

额外检查小贴士 #

1. 确认头字段名一致：打开浏览器开发者工具的「Network」标签，找到你的请求，查看「Response Headers」，确保你代码里写的字段名和后端返回的完全匹配（HTTP头本身大小写不敏感，但headers.get()方法会严格匹配大小写，最好保持一致）。
2. 如果用Authorization头：很多JWT会放在Authorization头里，格式是Bearer <token>。这种情况不需要额外暴露，因为Authorization是CORS允许的标准头，你可以这样提取：

   const authHeader = response.headers.get('Authorization');
   if (authHeader) {
     const jwtToken = authHeader.split(' ')[1]; // 提取Bearer后面的Token内容
   }
   

3. 检查拦截器影响：如果你用了HTTP拦截器，要确保拦截器没有修改响应或者只返回了响应体，必须传递完整的HttpResponse对象。

这样调整后，你应该就能顺利拿到响应头里的JWT Token啦！

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