How to force Angular2 to POST using x-www-form-urlencoded

by

For Angular > 4.3 (New HTTPClient) use the following:

let body = new URLSearchParams();
body.set('user', username);
body.set('password', password);

let options = {
    headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};

this.http
    .post('//yourUrl.com/login', body.toString(), options)
    .subscribe(response => {
        //...
    });

Note 3 things to make it work as expected:

  1. Use URLSearchParams for your body
  2. Convert body to string
  3. Set the header’s content-type

Attention: Older browsers do need a polyfill! I used: npm i url-search-params-polyfill --save and then added to polyfills.ts: import 'url-search-params-polyfill';

More Related Contents:

  1. based on mobile number how do i get country code in javascript or anguler 2+ [duplicate]
  2. How do I return the response from an Observable/http/async call in angular?
  3. How to load external scripts dynamically in Angular?
  4. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  5. Angular 2: Two backend service calls on success of first service
  6. How to check whether is empty? (in Angular 2+ till now)
  7. How to use Local storage in Angular [duplicate]
  8. Angular 2 router event listener
  9. Subject vs BehaviorSubject vs ReplaySubject in Angular
  10. Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]
  11. Load existing components dynamically Angular 2 Final Release
  12. Angular 6: HTML table create dynamic columns and rows
  13. How to make a disabled reactive form Editable in Angular2
  14. Firestore Timestamp.fromDate not UTC
  15. Angular 5 Scroll to top on every Route click
  16. Angular 2 – How to pass URL parameters?
  17. execute a function when *ngFor finished in angular 2
  18. How to cancel a subscription in Angular2
  19. Correct way Provide DomSanitizer to Component with Angular 2 RC6
  20. What is Angular 4 and from where I can learn more about it?
  21. How to use onBlur event on Angular2?
  22. Angular interceptor exclude specific urls
  23. How to iterate using ngFor loop Map containing key as string and values as map iteration
  24. Angular why asterisk (*)
  25. Get current url in Angular [duplicate]
  26. Upgrading to Angular 10 – Fix CommonJS or AMD dependencies can cause optimization bailouts
  27. ng2-charts update labels and data
  28. How to disable Browser back button in Angular 2
  29. Filter Array in Array by date between 2 dates
  30. Protractor Angular 2 Failed: unknown error: angular is not defined

Leave a Comment