How to send “Cookie” in request header for all the requests in Angular2?

by

I guess that there is a phase where you ask the server to authenticate you. Following this (and if the authentication is successful), the server will return a cookie in the response. The browser will store this cookie and send it again for each call.

That said, in the case of cross domain requests (CORS), you need to set the withCredentials of XHR to true to make the browser add cookies in your requests.

To enable this with Angular2, we need to extend the BrowserXhr class as described below:

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor() {}
  build(): any {
    let xhr = super.build();
    xhr.withCredentials = true;
    return <any>(xhr);
  }
}

and override the BrowserXhr provider with the extended:

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(BrowserXhr, { useClass: CustomBrowserXhr })
]);

See this questions for more details:

Edit (following the freaker‘s comment)

From RC2, you can use the withCredentials property directly within the request configuration as described below:

this.http.get('http://...', { withCredentials: true })

Edit (following the [maxou] comment)

Remember to include withCredentials: true on every request.

More Related Contents:

  1. Angular HttpClient “Http failure during parsing”
  2. Want to upgrade project from Angular v5 to Angular v6
  3. Argument of type ‘string | null’ is not assignable to parameter of type ‘string’. Type ‘null’ is not assignable to type ‘string’
  4. NullInjectorError: No provider for AngularFirestore
  5. What are the parameters for the number Pipe – Angular 2
  6. Body of Http.DELETE request in Angular2
  7. How to run the Dist Folder on Local Machine in Angular 6+?
  8. Angular 2 change event – model changes
  9. SassError: Can’t find stylesheet to import. @use ‘~@angular/material’ as mat;
  10. How to delete a field in a Firestore Document?
  11. Angular2: use [(ngModel)] with [ngModelOptions]=”{standalone: true}” to link to a reference to model’s property
  12. Angular 2 Reactive Forms trigger validation on submit
  13. How to manually set focus on mat-form-field in Angular 6
  14. What is the difference between fakeAsync and async in Angular testing?
  15. How to use angular 2 service with Ionic 2?
  16. Angular 2 – multiple instance of service created
  17. why lazy loaded module has to import commonModule? Angular 2
  18. Do I need to `complete()` takeUntil Subject inside ngOnDestroy?
  19. How is Angular’s *ngFor loop implemented?
  20. How to dynamically add FormControl to FormArray on button click in Angular?
  21. Creating a dynamic repeater with ng-content transclusion
  22. Angular FIrebase 5 objects keys not being displayed. So can’t delete
  23. How can I inject ViewContainerRef into a service?
  24. Access to XMLHttpRequest has been blocked origin ASP.NET CORE 2.2.0 / Angular 8 / signalr1.0.0 [(CORS Policy-Access-Control-Allow-Origin) failed]
  25. How to implement behavior subject using service in Angular 8
  26. Angular 9 Formarray search operation executing for only first dynamic control
  27. How can I catch the Material Datepicker month pagination event?
  28. Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)
  29. Get reference to a directive used in a component
  30. Why angular 2 ngOnChanges not responding to input array push

Leave a Comment