How do I pass header data with Angular 5?

Question

This worked in Angular 4. What do I change for it to work in angular 5?

 getGreeting(): Observable<string> {
    let headers = new Headers({ 'Authorization': 'Bearer ' + this.authenticationService.token });

  //cant find requestoptions
  let options = new RequestOptions({ headers: headers });

    return this.http.
        get(Constant.ApiRoot + Constant.GreetingService, options).
        map((response: Response) => response.text());
}

should be the same. did you try – Sajeetharan Apr 17 '18 at 02:25 — Sajeetharan, Apr 17 '18 at 02:25

score 5 · Accepted Answer · answered Apr 17 '18 at 03:36

The headers can be passed as HttpHeaders or Plain JSON object but it should be part of HttpOptions. You can find more about it on Angular's official documentation at https://angular.io/guide/http#adding-headers

const httpOptions = {
      headers: new HttpHeaders({      
        'Authorization': Bearer ' + this.authenticationService.token 
      })
    };
this.httpClientObj.get('url',httpOptions);

Zze · Answer 2 · 2018-04-17T04:43:55.923

2

This is what I use with my HttpClient.post and .get

let headers = new HttpHeaders({
            'Content-Type': 'application/json',
            'responseType': 'json'
        });

this.http.post("url", { SomeDate: data }, { headers: headers })
this.http.get("url", { headers: headers })

edited Apr 17 '18 at 04:43

answered Apr 17 '18 at 02:28

Zze

18,229
13
85
118

1

This is for `http`. As of angular 5, it is suggested that you should use `http-client` instead. – Plochie Apr 17 '18 at 04:18
@PareshLomate Amended. – Zze Apr 17 '18 at 04:45

Trilok Pathak · Answer 3 · 2018-10-03T05:58:43.087

Here is the detailed answer to the question:

Pass data into the HTTP header from the Angular side (Please note I am using Angular4.0+ in the application).

There is more than one way we can pass data into the headers. The syntax is different but all means the same.

// Option 1 
 const httpOptions = {
   headers: new HttpHeaders({
     'Authorization': 'my-auth-token',
     'ID': emp.UserID,
   })
 };


// Option 2

let httpHeaders = new HttpHeaders();
httpHeaders = httpHeaders.append('Authorization', 'my-auth-token');
httpHeaders = httpHeaders.append('ID', '001');
httpHeaders.set('Content-Type', 'application/json');    

let options = {headers:httpHeaders};


// Option 1
   return this.http.post(this.url + 'testMethod', body,httpOptions)

// Option 2
   return this.http.post(this.url + 'testMethod', body,options)

In the call you can find the field passed as a header as shown in the image below :

Still, if you are facing the issues like.. (You may need to change the backend/WebAPI side)

Response to the preflight request doesn't pass access control check: No ''Access-Control-Allow-Origin'' header is present on the requested resource. Origin ''http://localhost:4200'' is therefore not allowed access
Response for preflight does not have HTTP ok status.

Find my detailed answer at https://stackoverflow.com/a/52620468/3454221

How do I pass header data with Angular 5?

3 Answers3