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?
2 Answers
I see two ways to do that:
- Option #1: use the
BaseRequestOptionsclass
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
Httpclass 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
answered Jan 24, 2016 at 18:30
Thierry Templier
203k44 gold badges407 silver badges366 bronze badges
4 Comments
xmaestro
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
In short can we modify the observable that is returned?
papar
With option 2, here's comprehensive guide on adding default http headers (and catch http errors ) by extending the Http class - adonespitogo.com/articles/angular-2-extending-http-provider
Ward
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 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).
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
