Angular 5 HTTP Client 的 Response header 中缺少 "Authorization"

Question

我正在使用 JWT(JSON Web token )作为将人们登录到系统的一部分。执行此操作的代码如下:

this.http.post(url, JSON.stringify({ username: username, password: password }), { observe: 'response' })
      .subscribe((response: HttpResponse<any>) => {

当向服务器发送用户名和密码时，Response对象在Header中包含加密的授权。

作为 header 的一部分包含一个 Authorization 条目和一个 Pragma 条目。 Authorization 正确定义了 token (并且有效)。 Pragma 也定义为 no-cache

从 Chrome 中的“网络”选项卡:

但是当运行代码来处理响应 header 时，Authorization header 不存在。

 adminLogin(username, password) {
    let url = `${this._apiRoot}/login`;
    let tokenResp = {};

    this.http.post(url, JSON.stringify({ username: username, password: password }), { observe: 'response' })
      .subscribe((response: HttpResponse<any>) => {

        console.log(" ---- begin response ----");
        console.log( response );
        console.log(" ---- end response ----");

        let token = response.headers.get("Authorization");

        console.log(" ---- begin token ----");
        console.log ( token );
        console.log(" ---- end token ----");

        let pragma = response.headers.get("pragma");

        console.log(" ---- begin pragma ----");
        console.log ( pragma );
        console.log(" ---- end pragma ----");

代码执行结果:

从执行的代码中，我们可以看到试图找到 Authorization 返回 null 而 Pragma 得到 no-cache 。这是怎么回事？

更新

感谢大家提供的信息。

我按照这里的信息: https://github.com/angular/angular/issues/13554

并对 java 代码进行了更改:

@Override
    protected void successfulAuthentication(HttpServletRequest req,
            HttpServletResponse res, FilterChain chain, Authentication auth)
            throws IOException, ServletException {
        String username = ((User) auth.getPrincipal()).getUsername();
        ApplicationUser user = applicationUserRepository
                .findByUsername(username);

        String token = Jwts
                .builder()
                .setSubject(((User) auth.getPrincipal()).getUsername())
                .claim("id", user.getId())

            [... snip ...]

            res.addHeader("Access-Control-Expose-Headers", "Authorization");
            res.addHeader(SecurityConstants.HEADER_STRING,SecurityConstants.TOKEN_PREFIX + token);

    }

再次感谢!

Answer 1

要解决此问题，我们需要从后端公开所需的 header 并使用和编写自定义 HttpInterceptor .

NodeJs API 示例:从后端公开authorization header

res.setHeader('Access-Control-Expose-Headers', 'authorization'); 
res.setHeader('authorization', 'foo-bar');

Angular 拦截器示例

@Injectable()
export class HttpInterceptorService implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<any> {
    return next.handle(request).pipe(
      tap(response => {
        if (response.headers) {
          console.log('Header keys', response.headers.keys());
          console.log('Authorization: ', response.headers.get('authorization'));
        }
      }),
    );
  }
}

最后我们将我们的拦截器添加到我们的模块提供者

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpInterceptorService } from './http-interceptor.service';

@NgModule({
  ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true },
  ],
})
export class AppModule {}

这sample code和 repos can有助于进一步了解 Angular HttpInterceptor