无法在 Angular 拦截器上获取 HTTP 标头答案

【问题标题】：Cannot get HTTP Headers on Angular Interceptor无法在 Angular 拦截器上获取 HTTP 标头
【发布时间】：2021-06-17 10:06:50
【问题描述】：

我在响应中的 nodejs (express) 应用程序中设置自定义标头：

res.header('Vme','true')
next()

当我得到对客户端的响应时，我可以在浏览器中正确看到标题： browserHeaders

问题是我无法访问角度 hhtp 拦截器中的标头：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.loaderService.show()
return next.handle(request)
  .pipe(
    map((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        const message = event?.body?.message
        if (message?.length) {
          this.toastService.show(event?.body?.message, SeveritiesEmun.Success)
        }
      }
      return event
    }),
    catchError(error => {
      let errorMessage = error?.error || 'Error'
      if (typeof errorMessage === 'object') {
        errorMessage = error?.statusText || 'Error'
      }
      this.toastService.show(errorMessage, SeveritiesEmun.Fail)
      return throwError(errorMessage)
    }),
    finalize(() => {
      this.loaderService.hide()
    })
  )
}

在错误(error)和成功实例((event: HttpEvent))中 “headers”属性不包含任何值。

【问题讨论】：

标签： javascript node.js angular express middleware

【解决方案1】：

您必须像这样处理发送数据：

import { tap } from "rxjs/operators";


next.handle(req).pipe(
    tap((event: HttpEvent<any>): void => {
        if (event instanceof HttpResponse) {
            // do whatever with event
        }
    })
);

然后您可以通过event.headers.has("Vme")检查您的标头是否已应用，并通过event.headers.get("Vme")访问它

【讨论】：

我已经检查了 response.headers.get('Vme') 是否为 null 并且 response.headers.has('Vme') 是否为 false
您确定服务器发送标头吗？可以用浏览器的开发者网络工具查看
我已经添加了这张图片，请参阅下面的问题。在浏览器的“网络”选项卡中，我可以正确看到“Vme”标题。