Angular读取HTTP响应头Authorization值为null问题及解决方案

调用登录接口时，尝试从响应中读取鉴权Token，但是获取Authorization响应头的返回值为null，当前仅Content-Type响应头可以正常读取。

登录请求封装 #

login(credentials: any): Observable<any> {
    return this.http.post(AUTH_API + '/login', {
      username: credentials.username, 
      password: credentials.password
    }, {observe: 'response'});
  }

接口调用逻辑 #

this.authService.login(this.loginForm.value)
      .subscribe((res:Response) => {
        console.log(res.headers.get('Authorization'));
    },
    err => {
      this.isLoginError = true;
      this.loginErrorMessage = err.error;
    });

跨域请求场景下，浏览器出于安全限制，默认仅向前端JS暴露少量基础响应头（包含Content-Type等），其余响应头即使在开发者工具网络面板中可见，前端代码也无法直接读取，Authorization头就属于默认不暴露的响应头范畴。

后端在返回响应时添加Access-Control-Expose-Headers配置，明确声明将Authorization头暴露给前端即可解决问题。
Java后端参考配置代码：

response.setHeader("Access-Control-Expose-Headers", "Authorization");
response.addHeader("Authorization", jwtTokenProvider.generateToken(auth));

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