angular 2 http withCredentials

Question

I'm am trying to use withCredentials to send a cookie along to my service but can't find out how to implement it. The docs say "If the server requires user credentials, we'll enable them in the request headers" With no examples. I have tried several different ways but it still will not send my cookie. Here is my code so far.

private systemConnect(token) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('X-CSRF-Token', token.token);
    let options = new RequestOptions({ headers: headers });
    this.http.post(this.connectUrl, { withCredentials: true }, options).map(res => res.json())
    .subscribe(uid => {
        console.log(uid);
    });
}

score 69 · Accepted Answer · edited Oct 16 '20 at 00:11

69

Try to change your code like this

let options = new RequestOptions({ headers: headers, withCredentials: true });

and

this.http.post(this.connectUrl, <stringified_data> , options)...

as you see, the second param should be data to send (using JSON.stringify or just '') and all options in one third parameter.

edited Oct 16 '20 at 00:11

Koray Tugay

22,894
45
188
319

answered Jul 27 '16 at 14:21

Oleg Barinov

1,635
12
7

It is already inside the comments for Headers and RequestOptions source files ) Until official API docs are not ready - we have to use comments in source code instead ) – Oleg Barinov Jul 27 '16 at 14:43
4

This is now out of date due to HttpClient being the standard – Brad Johnson Feb 02 '18 at 21:11
The right solution with HttpClient is here: https://stackoverflow.com/questions/47304912/angular-4-setting-withcredentials-on-every-request-cors-cookie – tbo47 Mar 29 '18 at 10:25
by passing withCred server can set the cookie for cross domain, what if i am using script tag and loading the script, in that case nodejs can set the cookie? https://stackoverflow.com/questions/70951915/not-able-to-set-the-cookie-from-script-tag-javascript-nodejs – Sunil Garg Feb 02 '22 at 08:48

score 33 · Answer 2 · edited Sep 10 '21 at 15:36

Starting with Angular 4.3, HttpClient and Interceptors were introduced.

A quick example is shown below:

@Injectable()
export class WithCredentialsInterceptor implements HttpInterceptor {

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

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

        return next.handle(request);
    }
}

constructor(
      private http: HttpClient) {

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

Remember to provide the interceptor to your app module, as the article says:

In order to activate the interceptor for our application we need to provide it to the main application module AppModule in file app.module.ts:

Your @NgModule will need to include this in its providers:

  ...
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: WithCredentialsInterceptor,
    multi: true
  }],
  ...

score 10 · Answer 3 · answered Nov 25 '18 at 21:19

Creating an Interceptor would be good idea to inject stuff into header across the application. On the other hand, if you are looking for a quick solution that needs to be done on a per request level, try setting withCredentials to true as below

const requestOptions = {
 headers: new HttpHeaders({
  'Authorization': "my-request-token"
 }),
 withCredentials: true
};

angular 2 http withCredentials

3 Answers3

Linked