Angular 5 Http拦截器不检测响应标头（POST）

Question

我在控制台上记录日志时，无法在拦截器中获取自定义响应标头。控制台记录了拦截器httpResponse

``控制台日志响应''

HttpResponse {标头：HttpHeaders，状态：200，statusText：“确定”，确定：true，…}

HttpHeaders lazyInit：ƒ（）lazyUpdate：null normalizedNames：Map（0）{} proto ：对象ok：真实状态：200 statusText：“ OK”类型：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;
        })

}

拦截功能

网络标签中的自定义标题

访问控制允许凭证：true

访问控制允许方法：GET，POST，OPTIONS

访问控制允许来源：*

访问控制公开标头：访问令牌，客户端，到期，令牌类型，uid

访问令牌：haIXZmNWSdKJqN2by7JH1g

缓存控制：max-age = 0，私有，必须重新验证

客户端：j_2dxD7NVMjGeX8BbBuELA

内容类型：application / json; 字符集= utf-8

到期日：1525931943

在“网络”标签中获取自定义标题

这也是我的服务电话，在电话中也请注意“响应”。

服务电话

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

服务电话

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

HttpInterceptor 的这个实现应该对你有帮助。HttpResponse类有一个Headers属性，它将帮助您读取响应标头。