How to Force Angular2 to Post Using X-Www-Form-Urlencoded

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

UPDATE June 2020: This answer is 4 years old and no longer valid due to API changes in Angular. Please refer to more recent answers for the current version approach.

---

You can do this using URLSearchParams as the body of the request and angular will automatically set the content type to application/x-www-form-urlencoded and encode the body properly.

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

this.http.post(this.loginUrl, body).map(...);

The reason it's not currently working for you is you're not encoding the body data in the correct format and you're not setting the header options correctly.

You need to encode the body like this:

let body = `username=${username}&password=${password}`;

You need to set the header options like this:

this.http.post(this.loginUrl, body, { headers: headers }).map(...);

Can't make a x-www-form-urlencoded POST in Angular

When you use an objet as body of the HTTP Client, it will serialize it to json.
If you want to send your data as x-www-form-urlencoded you need to use an HttpParams as body.

  getToken(code: string) {
    let url = 'https://localhost:44301/connect/token';

    let param = {
      client_id: 'awesome_client',
      client_secret: 'HakunaMatata',
      redirect_uri: 'http://localhost:44304/page01',
      code: code,
      grant_type: 'authorization_code'
    };
    var payload = new HttpParams({ fromObject: param });

    let headers = { 'Content-Type': 'x-www-form-urlencoded' };
    let options = { headers: headers };

    return this.http.post<any>(url, payload, options);
  }

How can I send a file using http POST request as a formData?

You can do this using URLSearchParams as the body of the request
and angular will automatically set the content type to
application/x-www-form-urlencoded and encode the body properly.

This post explained the answer in detail

Preserving + (Plus Sign) in URLEncoded Http Post request

This is also an Angular issue (@angular/common/http)

It will interpret the raw + sign as a replacement for a space.

You can implement HttpParameterCodec into a simple encoder, for example:

import {HttpParameterCodec} from "@angular/common/http";
export class HttpUrlEncodingCodec implements HttpParameterCodec {
    encodeKey(k: string): string { return standardEncoding(k); }
    encodeValue(v: string): string { return standardEncoding(v); }
    decodeKey(k: string): string { return decodeURIComponent(k); }
    decodeValue(v: string) { return decodeURIComponent(v); }
}
function standardEncoding(v: string): string {
    return encodeURIComponent(v);
}

And then use it to get encoded correctly:

const headers = new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'});
const params = new HttpParams({encoder: new HttpUrlEncodingCodec()});
http.post(url, params, {headers: this.headers});

---

Related Topics