How can you log and inspect request and response headers in Angular

Question

can you tell me via code and example How can you log and inspect request and response headers in Angular?

Answer 1

In Angular, you can log request and response headers using HttpInterceptor.

1. Create an Interceptor

Run:

ng generate service interceptors/logging

2. Implement Logging in Interceptor (logging.interceptor.ts)

import { Injectable } from '@angular/core';

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable, tap } from 'rxjs';

@Injectable()

export class LoggingInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    console.log('Request Headers:', req.headers);

    return next.handle(req).pipe(

      tap(event => {

        console.log('Response Headers:', event);

      })

    );

  }

}

3. Register the Interceptor in app.module.ts

import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { LoggingInterceptor } from './interceptors/logging.interceptor';

@NgModule({

  providers: [

    { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }

  ]

})

export class AppModule { }