Angular 5 Http Interceptor don't detect response header (POST)

Question

I'm not able to get the custom response header in interceptor when i console log it. console logged the interceptor httpResponse

''Console log response''

HttpResponse { headers: HttpHeaders, status: 200, statusText: "OK", ok: true, … }

HttpHeaders lazyInit : ƒ () lazyUpdate : null normalizedNames : Map(0) {} proto : Object ok : true status : 200 statusText : "OK" type : 4

We also added the Access-control-expose-header in the server side. Still i'm not getting the response. Not sure whether i miss something in the interceptor method.

Interceptor method

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

Custom header in network tab

access-control-allow-credentials: true

access-control-allow-methods: GET, POST, OPTIONS

access-control-allow-origin: *

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

access-token: haIXZmNWSdKJqN2by7JH1g

cache-control: max-age=0, private, must-revalidate

client: j_2dxD7NVMjGeX8BbBuELA

content-type: application/json; charset=utf-8

expiry: 1525931943

getting custom headers in network tab

Also this is my service call, added observe 'response' in the call too.

Service call

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 { }

Help me please. Thanks in advance!

Answer 1

This implementation of HttpInterceptor should be of help to you. The HttpResponse class has a Headers property which will help you read your response header.