Angular 6 HttpClient GET response not returning the custom headers

Question

I am new to Angular 6 and have created a new application to replace our existing Angular 1.x application. I am making a GET call to the server like so -

httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }),
responseType: 'text' as 'json'
};

return this.http.get(this.domain + '/login', this.httpOptions).pipe(
  map((res: HttpResponse<any>) => {
  let myHeader = res.headers.get('X-CSRF-TOKEN');
  return res;
}

In my response header I get something like this -

In my response callback I am trying to get this token info and set it to some storage to pass as header to my future request. However, my response body is an HTML document - which I am receiving using

responseType: 'text' as 'json

So inside my callback, instead of getting the entire response which includes the headers, I am just getting the HTML document as text.

Why am I not getting the complete response with header and all?

Note: I tried removing the responseType altogether - but then I'm always just getting an HttpErrorResponse even though the server returns a 200.

SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse

So I have retained the responseType.

Any help is appreciated.

Answer 1

You're after the {observe: 'response'} option for HttpClient :

httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }),
  responseType: 'text' as 'json',
  observe: 'response'
};

Now HttpClient.get() returns an Observable of typed HttpResponse rather than just the JSON data.

See Reading the full response in the docs.