angular


Angular 2 disable XSRFStrategy for a single service or per request


I fetch results from third party REST services in my application. These services stall with
Request header field X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response. because angular2 has set this header as a standard for all requests per default.
I've 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 on a module level, meaning it disables this for all requests regardless of which service provides them.
What I would like, is to decide for my self which Http call that should be stripped of such headers and which can continue using them. With the solution above, I have to isolate the service in a separate module and use the NoXSRFStrategy for only this module. I haven't tested this in conjunction with other services in other modules, but I hope this does not set NoXSRFStrategy as a global request config.
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 on service level:
#Injectable()
export class MyService {
constructor(private http: Http) {
this.http.setXsrfStrategy(NoXSRFStrategy); // For only this http instance...
}
Does anybody know if there is any way of disabling the X-XSRF-TOKEN header other than setting a module level config?
I figured it out!
You can override the default Http class with your own. This is the closest I got to a 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);
});
}
}

Related Links

Angular2 http json request
Angular 2 John Papas' Seed Project with simple Apache Server
Angular2 is converting an Array to String
Show page not found in Angular2
Angular2 SELECT OPTION after pipe executes
Angular2 - EXCEPTION: TypeError: Cannot read property 'screen' of undefined
Angular 2: onChanges() is not reflecting Object value changes
How to call ViewChild in runtime?
Angular2 not detecting change to object value
Getting values of looped template using angular2 forms
Breeze and Angular2
Angular 2 hide/show template
Angular 2 RC1 - Auto import all used components inside a base component
Add Lodash to VS2015 Angular2 Project
cannot find module errors after upgrading to angular-2.0.0-rc.4
Angular 2 don't dectect change on an Observable

Categories

HOME
angular
videochat
solr
qt5
properties
refactoring
statistics
informix
bitcoin
binary
acr122
ejb
servo
osticket
flannel
access-control
snapshot
executable-jar
twitter-typeahead
smt
pyside
flip-flop
angle
amazon-lightsail
oracle-data-integrator
nexmo
lightgallery
angularjs-ng-model
scada
predict
uievent
ektron
winlims
evosuite
ctags
crypto++
opscenter
synopsys-vcs
asana-connect
gyp
volume-rendering
leshan
news-feed
spock-reports
archiving
arithmetic-expressions
ratchet
graphic-effects
tvml
ng-template
dsquery
sparklines
pdf-extraction
opcode
msbuildcommunitytasks
template-strings
fileapi
gcdasyncsocket
fluid-layout
cpanm
dynamic-ip
protection
android-bundle
cordova-chrome-app
rgs
coderunner
kiosk-mode
vin
iec61131-3
unassigned-variable
kindle-fire
out
mic-1
amber-smalltalk
.class-file
sniffing
robohelp
gwt-2.5
primefaces-extensions
sts-securitytokenservice
system-design
texinfo
assetslibrary
flotr
layar
iphone-sdk-4.1
showmodaldialog
ipod-nano

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App