CODEWITHSUNDEEP
angularangular2-servicesangular2-http
Lindstrom
Lindstrom

Reputation: 815

angular 2 http withCredentials

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);
    });
}

Upvotes: 61

Views: 114181

Answers (4)

Thomas
Thomas

Reputation: 10065

Here is a solution for Angular 17 using an interceptor:

credential.interceptor.ts

import { HttpInterceptorFn } from '@angular/common/http';

export const credentialsInterceptor: HttpInterceptorFn = (request, next) => {
  const modifiedRequest = request.clone({
    withCredentials: true
  });
  return next(modifiedRequest);
};

app.config.ts

import { ApplicationConfig } from '@angular/core';

import { provideHttpClient,
         withFetch,
         withInterceptors } from '@angular/common/http';

import { credentialsInterceptor } from './credentials.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideHttpClient(withFetch(), withInterceptors([credentialsInterceptor])),
  ]
};

Side note: You can also generate interceptor using ng generate interceptor credentials.

Upvotes: 3

Alexei - check Codidact
Alexei - check Codidact

Reputation: 23078

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
  }],
  ...

Upvotes: 33

Oleg Barinov
Oleg Barinov

Reputation: 1665

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.

Upvotes: 71

James Poulose
James Poulose

Reputation: 3833

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
};

Upvotes: 10

Related Questions