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!

Solution

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.

Comments

[Sankar Namachivayam]

I'm using import { HttpClient } from "@angular/common/http"; . Just in constructor named it as http. Still i'm not getting the response.

[Sankar Namachivayam]

I'm able to get the Response body and header. But the header contains empty data.

[sebu]

Ok, i have a solution, but i can send you after few hours. Thanks @SankarNamachivayam

[Sankar Namachivayam]

tried it, didn't work. I can able to set headers in request. I'm not getting response header when i console it in cloned request's next handler.

[Eliseo]

the function "intercept" is executed?, see that if you want to use over all the request you must import HTTP_INTERCEPTORS and declare in your app.module.ts

[Sankar Namachivayam]

yes, it is executed. Have updated app.module.ts in the question, please check.

[Eliseo]

use newreq=req.clone... and return next.handle(newreq). I's only an idea, I don't be sure that work

[Sankar Namachivayam]

Yes, i checked. I actually used HttpClient only. The problem is from server side. This helped us in solving this issue stackoverflow.com/a/47539194/8587798. We missed the 'always' keyword in nginx config. Thanks for your time and appreciate your efforts.

[sebu]

Welcome @SankarNamachivayam