Getting response headers for a get request in angular

Question

I am trying to do a get request using basic auth and need to fetch the token from the response headers. I've gone through similar questions and am doing what was suggested there however I'm still not able to get the required header. Thanks in advance for your help.

Here is my code:

testLogin(): Observable < any > {
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Basic ' + btoa('username:password')
    }),
    observe: 'response'
    as 'body'
  };
  return this.http.get < any[] > ('/login', httpOptions);
}

...

this.service.testLogin().subscribe(r => {
  console.log(r.headers);
});

The following is printed on the console:

HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
lazyInit: () => {…}
lazyUpdate: null
normalizedNames: Map(0)
[[Entries]]
No properties
size: (...)
__proto__: Map
__proto__:
append: ƒ append(name, value)
applyUpdate: applyUpdate(update) { const key = update.name.toLowerCase(); switch (update.op) { case 'a': case 's': let value = update.value; if (typeof value === 'string') { value = [value]; } if (value.length === 0) { return; } this.maybeSetNormalizedName(update.name, key); const base = (update.op === 'a' ? this.headers.get(key) : undefined) || []; base.push(...value); this.headers.set(key, base); break; case 'd': const toDelete = update.value; if (!toDelete) { this.headers.delete(key); this.normalizedNames.delete(key); } else { let existing = this.headers.get(key); if (!existing) { return; } existing = existing.filter(value => {…}
clone: ƒ clone(update)
constructor: class HttpHeaders
copyFrom: copyFrom(other) { other.init(); Array.from(other.headers.keys()).forEach(key => {…}
delete: ƒ delete(name, value)
forEach: forEach(fn) { this.init(); Array.from(this.normalizedNames.keys()) .forEach(key => {…}
get: ƒ get(name)
getAll: ƒ getAll(name)
has: ƒ has(name)
init: init() { if (!!this.lazyInit) { if (this.lazyInit instanceof HttpHeaders) { this.copyFrom(this.lazyInit); } else { this.lazyInit(); } this.lazyInit = null; if (!!this.lazyUpdate) { this.lazyUpdate.forEach(update => {…}
keys: ƒ keys()
maybeSetNormalizedName: ƒ maybeSetNormalizedName(name, lcName)
set: ƒ set(name, value)
__proto__: Object

Answer 1

Have you exposed the token from server-side? In your console log, there is no token I have seen. If there is a token then you can access it as like r.headers.get('token_name') . If you don't expose it from the server-side please see this problem. I may think the first two solutions can help you.

Answer 2

You have to set observe to response:

const httpOptions = {
  headers: new HttpHeaders({
    "Content-Type": "application/json",
    Authorization: "Basic " + btoa("username:password")
  }),
  observe: "response"
};

Plus, I don't think you can read all the response headers.

You can check the ones that you can read by using the response.headers.keys() method.

this.service.testLogin().subscribe(response => {
  response.headers
    .keys()
    .forEach(keyName =>
      console.log(
        `The value of the ${keyName} header is: ${response.headers.get(
              keyName
            )}`
      )
    );
});

Here's a working Sample Code on StackBlitz for your ref.