angular2-services

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


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.


Solution

  • 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), 
    };