How to get Request Header value when accessing my Angular application

Question

My Angular application will be accessed from another application and the environment which is used to deploy our applications are configured in such a way that, the request coming from that application to access my Angular application will contain some information which is set in Request Header. I'm asked to use that header information to identify the application from which my Angular application is called. The other application can be either External or Internal deployed application. And that information will be available in the request header.

I'm not able to find any way on how to get/read header information of the my application access request in Angular. Somebody please help me..

This is more of a JavaScript question - see https://stackoverflow.com/questions/220231/accessing-the-web-pages-http-headers-in-javascript — danday74, Aug 23 '18 at 12:08

score 2 · Answer 1 · answered Aug 23 '18 at 12:20

because there is no method to do this. Your Application is running in the browser, so your application doesnt receive any requests, but the browser does. You should probably find another architecture. Involve your backend in the flow. Maybe construct an endpoint which is redirecting to your application.

Another same question

So the only way I know to retrieve anything from the headers is the httpInterceptor, that is intercepting any outgoing request and is observing the response like so:

import { Injectable } from '@angular/core';
import { HttpInterceptor, 
         HttpEvent, 
         HttpHandler, 
         HttpRequest, 
         HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class HeaderInterceptor implements HttpInterceptor {

   constructor(private userService: UserService, 
               private constantsService: ConstantsService){ }

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

    if(req.url.includes(/*whatever you are looking for*/)) { 

    }

    return next.handle(req).do((suc) => {
        if(suc.type !== 0){
            const whateverDataYouNeed = suc['headers'].get(/*whatever header you need*/);
            // Do something with it           
        }

    }).
    catch((error, caught) => {
        return Observable.throw(error);
    }) as any;
  }
}

Best regards!

But the other application which is accessing my Angular application is making an HTTP request only right...So how can we intercept to that HTTP request. Is my thought correct ? — akr, Aug 23 '18 at 12:51
The HttpInterceptor you written will intercept the request which made from our application only right — akr, Aug 23 '18 at 12:52
Yes mate, thats what I wrote. But normally there is a solution out there, otherwise you have to get creative ;) — sagat, Aug 25 '18 at 02:29

How to get Request Header value when accessing my Angular application

1 Answers1

Linked