11

I know how to set headers for a single HTTP call using the Headers class.

Is there a way to do it for all HTTP calls?

geraldpereira
  • 223
  • 3
  • 11

2 Answers2

13

I see two ways to do that:

  • Option #1: use the BaseRequestOptions class

You could extend this class and set the header to use for each request:

@Injectable()
export class DefaultRequestOptions extends BaseRequestOptions{
    headers:Headers = new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    });
}

And registers it as described below:

bootstrap(AppComponent,[
    HTTP_PROVIDERS,
    provide( RequestOptions, { useClass: DefaultRequestOptions })
});
  • Option #2: extend the Http class itself

You could also extend the Http class and set the headers you want in it, as described below:

@Injectable()
export class CustomHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    return super.request(url, options);        
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    // Add headers into options
    (...)
    return super.get(url, options);
  }

  (...)
}

And registers it as described below:

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(Http, {
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
    deps: [XHRBackend, RequestOptions]
  })
]);

Hope it helps you, Thierry

Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • Is there a way we can modify the return observable within the service. Like changing what happens when the request is started or finished? How will we do that? – xmaestro Mar 29 '16 at 06:43
  • In short can we modify the observable that is returned? – xmaestro Mar 29 '16 at 06:43
  • 1
    With option 2, here's comprehensive guide on adding default http headers (and catch http errors ) by extending the Http class - http://www.adonespitogo.com/articles/angular-2-extending-http-provider/ – papar Nov 07 '16 at 03:09
  • 1
    Option #1 - updated for the current Angular release - is a much easier approach if headers (and other request options) are your concern. The official Angular docs recommend it (the [HTTP guide](https://angular.io/docs/ts/latest/guide/server-communication.html#!#override-default-request-options) will say so in a few days). Full request and response interception is another matter. There is a doc for that purpose in the wings. Stay tuned (Jan 2017-ish). – Ward Dec 15 '16 at 04:49
3

You can't use someting like $httpProvider for angular1 but you can create your own CustomHttp class which extends/wraps the default Http and add your headers.

Take a look at AuthHttp source code from angular2-jwt library: https://github.com/auth0/angular2-jwt/blob/master/angular2-jwt.ts

bertrandg
  • 3,147
  • 2
  • 27
  • 35