Unable to define custom headers using HttpHeaders on Angular 8

Question

I am trying to run a GET request to SAP Business Objects which requires some custom headers. I followed Angular documentation to define the headers using HttpHeaders class but it seems like the custom headers (X-...) are not being recognized.

Here is my code to create the headers and run the GET request:

getEnvId(token: string) {

    this.tokenHdr = { 
      headers: new HttpHeaders({
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Accept-Language': 'en-US',
        'X-SAP-PVL': 'en-US',
        'X-SAP-LogonToken': token
      })
    }

    console.log(this.tokenHdr);

    return this._http.get('http://' + this.environment + '/biprws/infostore/cuid_' + this.reportCuid, this.tokenHdr)
  }

The console.log(this.tokenHdr) appears as follows:

And the error response is:

I am able to retrieve the token and pass it to this request, as I am able to successfully print the token to the console before this step. The token is retrieved via a POST request without any custom headers, so I am guessing the issue has something to do with the custom headers.

From Network tab in browser dev tools:

In your developer tools > Network, do you see the headers going out with the request? If so then you have the angular side set up properly. It looks like this message could be also connected with an expired token. Is your token still valid? — Damian C, Jan 28 '20 at 19:58
Token expires after 60 minutes so that should not be a problem. I don't see the headers in the "Request Headers". I added a screenshot to my question. I don't see where I am going wrong with defining the headers? — ts1993, Jan 28 '20 at 20:25
oh! Do you have an auth interceptor somehwere? I see an Authorization header (which you may or may not want to scribble out). That wouldn't be there by default, as it has to be added somewhere in your angular app. You might have an Angular Http Intercepter deleting you headers — Damian C, Jan 28 '20 at 20:46

score 2 · Accepted Answer · answered Jan 28 '20 at 20:48

2

Try checking for any HttpInterceptors that are running on requests. Its possible your headers are being overwritten.

https://angular.io/guide/http#http-interceptors

answered Jan 28 '20 at 20:48

Damian C

2,111
2
15
17

Ahh! That was it. My headers were being overwritten by another service. – ts1993 Jan 28 '20 at 21:08

shashi kumar · Answer 2 · 2020-01-28T19:31:20.163

try to do like this solve's your problem the set method returns headers object every time, you can do this. This way, original headers from the intercepted request will also be retained.

let headers = new HttpHeaders().set('Accept', 'application/json')
     .set('Content-Type' , 'application/json')
     .set('Accept-Language','en-US')
     .set('X-SAP-PVL', 'en-US')
     .set('X-SAP-LogonToken', token)

let apiUrl: string = 'http://url';

return this.http.get(apiUrl, {headers});

here what i did please check it may help

//for getting token

  loadToken() {
    const token = localStorage.getItem('token');
    this.authToken = token;
  }

 createAuthHeader() {
    this.loadToken();
    const headers = new HttpHeaders().set(
      'Authorization',
      `Bearer ${this.authToken}`
    );
    return { headers };
  }

  someTest() {
    return this.http.get(`${this.url}/count`, 
      this.createAuthHeader());
  }

This does not work either. If I try to print "options" to the console, the headers are blank. — ts1993, Jan 28 '20 at 19:02
It seems like this is constructing the headers properly and in the same manner I was doing in the original post, but this is still returning the same error. — ts1993, Jan 28 '20 at 19:21

Unable to define custom headers using HttpHeaders on Angular 8

2 Answers2