Angular 5 Http 拦截器不检测响应 header (POST)

Question

当我控制台记录它时，我无法在拦截器中获取自定义响应 header 。 console logged the interceptor httpResponse

''控制台日志响应''

HTTP响应{ header :HttpHeaders，状态:200，statusText:“OK”，ok:true，...

HttpHeaders 惰性初始化 : ƒ () 惰性更新 : 无效的 标准化名称 : map (0) {} 原型(prototype) : 目的 行 : 真的 地位 : 200 状态文本 : “好的” 类型 : 4

我们还在服务器端添加了Access-control-expose-header。我仍然没有得到回应。不确定我是否错过了拦截器方法中的某些内容。

拦截器方法

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        req = req.clone({
            setHeaders: {
                'Accept': 'application/vnd.employee.tonguestun.com; version=1',
                'Content-Type': 'application/json',
            }
        });

    return next.handle(req)
        .do((ev: HttpEvent<any>) => {
            console.log(ev)
            if (ev instanceof HttpResponse) {
                console.log(ev.headers);
            }
            // return ev;
        })

}

interceptor fuction

网络选项卡中的自定​​义 header

访问控制允许凭证:真

访问控制允许方法:GET、POST、OPTIONS

访问控制允许来源:*

access-control-expose-headers: access-token,client,expiry,token-type,uid

访问 token :haIXZmNWSdKJqN2by7JH1g

缓存控制:max-age=0，私有(private)，必须重新验证

客户:j_2dxD7NVMjGeX8BbBuELA

内容类型:应用程序/json；字符集=utf-8

到期时间:1525931943

getting custom headers in network tab

这也是我的服务电话，在电话中也添加了观察“响应”。

服务电话

return this.http.post(`${environment.baseUrl}${environment.signup}`, data, {observe: "response"})
  .map(response => response);

service call

AppModule.ts

import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';

   import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppInterceptor } from './services/app-interceptor.service';

import { HomeModule } from './home/home.module'; 
import { SharedModule } from './shared/shared.module';
import { AppRoutingModule } from './app-routing.module';
import { AuthService } from './services/auth.service';
import { AuthGuardService } from './services/auth-guard.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    HttpClientModule,
    BrowserAnimationsModule,
    HomeModule,
    SharedModule,
    AppRoutingModule,
  ],
  providers: [
    AuthService,
    AuthGuardService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AppInterceptor,
      multi: true
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

请帮帮我。提前致谢!

Answer 1

This implementation HttpInterceptor 应该对你有帮助。 HttpResponse类有一个 Headers 属性，可以帮助您阅读响应 header 。