Angular 2 - append withCredentials = true with every http request

Question

I am using angular 2 (not latest as using through angular-cli: 1.0.0-beta.11-webpack.9-4) and I have to set withCredentials to true for every http request. I tried to set it up for one request using

http.get('http://my.domain.com/request', { withCredentials: true })

and everything is working fine however I am trying to use something in bootstrap as below but not getting any success

import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';
import {Http, Headers, BaseRequestOptions, RequestOptions, BrowserXhr} from '@angular/http';

if (environment.production) {
  enableProdMode();
}

export class MyRequestOptions extends BaseRequestOptions {
  constructor () {
    super();
    this.headers.append('withCredentials','true');
  }
}

platformBrowserDynamic().bootstrapModule(AppModule, 
  [{ provide: RequestOptions, useClass: MyRequestOptions}]
);

Hi, I'm facing the same problem, did you figured out how to do this? — Gustavo Lira, Sep 29 '16 at 15:17

score 3 · Answer 1 · edited Apr 09 '17 at 10:50

I don't know if it is required anymore, but I had the same problem and I've solved in this way:

Create a subclass of BaseRequestOptions (which extends RequestOptions):

import { Headers, BaseRequestOptions } from "@angular/http";

export class AuthRequestOptions extends BaseRequestOptions {
   constructor() {
      super();
      this.withCredentials = true;
   }
}

Register it in application bootstrap

import { RequestOptions } from '@angular/http';
import { AuthRequestOptions } from './<path>/AuthRequestOptions';

@NgModule({
   bootstrap: [...],
   imports: [...],
   providers: [
      { provide: RequestOptions, useClass: AuthRequestOptions},
      ...
   ]
}...

(In my case, this is that worked with CORS+NTLMAuthentication)

In case you are using Angular 4.3+ with HttpClientModule, refer to this article: https://spikesapps.wordpress.com/2017/08/04/how-to-implement-windows-authentication-in-an-angular-4-3-1-application-with-a-stand-alone-web-api/ — Sierrodc, Nov 07 '17 at 09:26

score 0 · Answer 2 · answered Apr 10 '18 at 15:45

As indicated by Sierrodc Angular 4.3+ allows interceptors usage to configure this. A full example that works with NTLMAuthentication is shown below:

The interceptor

@Injectable()
export class WithCredentialsInterceptor implements HttpInterceptor {


    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        request = request.clone({
            withCredentials: true
        });

        return next.handle(request);
    }
}

Module configuration (the interceptor allows stacking with other interceptors):

@NgModule({
    imports: [CommonModule, BasicRoutingModule, HttpClientModule],
    declarations: [HomeComponent, CounterComponent, FetchDataComponent],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: WithCredentialsInterceptor,
            multi: true
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: BaseUrlInterceptor,
            multi: true
        }
    ]
})
export class BasicModule { }

Actual usage

constructor(
    private http: HttpClient) {

    this.http.get<WeatherForecast[]>('api/SampleData/WeatherForecasts')
        .subscribe(result => {
            this.forecasts = result;
        },
        error => {
            console.error(error);
        });
}

Angular 2 - append withCredentials = true with every http request

2 Answers2