How I add Headers to http.get or http.post in Typescript and angular 2?

Question

getHeroes (): Observable<Heros[]> {     return this.http.get(this.heroesUrl)       .map(this.extractData)       .catch(this.handleError);   } 

Where I add the headers and how? looking for a simple example.

Answer 1

You can define a Headers object with a dictionary of HTTP key/value pairs, and then pass it in as an argument to http.get() and http.post() like this:

const headerDict = {   'Content-Type': 'application/json',   'Accept': 'application/json',   'Access-Control-Allow-Headers': 'Content-Type', }  const requestOptions = {                                                                                                                                                                                    headers: new Headers(headerDict),  };  return this.http.get(this.heroesUrl, requestOptions) 

Or, if it's a POST request:

const data = JSON.stringify(heroData); return this.http.post(this.heroesUrl, data, requestOptions); 

Since Angular 7 and up you have to use HttpHeaders class instead of Headers:

const requestOptions = {                                                                                                                                                                                    headers: new HttpHeaders(headerDict),  };