Angular 2 disable XSRFStrategy for one service or for request

Question

I get results from third-party REST services in my application. These services are stopped. Request header field X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response. because angular2 set this header as the standard for all requests by default.

I figured out how to disable this:

 import { HttpModule, XSRFStrategy } from '@angular/http'; export class NoXSRFStrategy { configureRequest(req: Request) { // Remove `x-xsrf-token` from request headers } } @NgModule({ imports: [ HttpModule ], declarations: [ ], providers: [{ provide: XSRFStrategy, useFactory: () => new NoXSRFStrategy() }] // !!HACK!! }) export class AppModule { } 

But this works at the module level, that is, it disables it for all requests, regardless of which service provides them.

What I would like is to decide for myself which Http call should be devoid of such headers and which can continue to use them. In the solution above, I have to isolate the service in a separate module and use NoXSRFStrategy only for this module. I have not tested this with other services in other modules, but I hope this does not set NoXSRFStrategy as the global request configuration.

Just to illustrate what I would like to be possible:

 @Injectable() export class MyService { constructor(private http: Http) { } apiCall() { return this.http.get('some.online/service.json', {useXsrf: false}); // ...or something... IDK } 

Or perhaps at the service level:

 @Injectable() export class MyService { constructor(private http: Http) { this.http.setXsrfStrategy(NoXSRFStrategy); // For only this http instance... } 

Does anyone know if there is a way to disable the X-XSRF-TOKEN header, besides setting the module level configuration?

Answer 1

I understood that!

You can override the default Http class with your own. This is the closest I got to the Http Interceptor:

app.module.ts

 @NgModule({ declarations: [AppComponent], imports: [HttpModule], providers: [{ provide: Http, useClass: AuthHttp }], bootstrap: [AppComponent] }) export class AppModule { } 

AuthHttp.ts

 import {Injectable} from '@angular/core'; import {Http, Request, Response, RequestOptionsArgs, RequestOptions, XHRBackend} from '@angular/http'; import {Router} from '@angular/router'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/observable/throw'; @Injectable() export class AuthHttp extends Http { constructor(backend: XHRBackend, defaultOptions: RequestOptions) { super(backend, defaultOptions); // Setup default http headers here defaultOptions.headers.append('Cache-control', 'no-cache'); defaultOptions.headers.append('Cache-control', 'no-store'); defaultOptions.headers.append('Pragma', 'no-cache'); defaultOptions.headers.append('Expires', '0'); } request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { // Before request execution. You can manipulate headers per request here. return super.request(url, options) .map(res => { // Successful Response return res; }) .catch((err: any) => { // Unsuccessful Response. return Observable.throw(err); }); } } 

Answer 2

I could stop sending a token with him.

 document.cookie = "XSRF-TOKEN=; path=/" // <- add this this.http.get(url, options) 

Just clear the cookie named "XSRF-TOKEN".

And I made an extended Http class that can choose to send a token or not.