angular - HttpClient POST request using x-www-form-urlencoded

Question

I'm trying to make a POST request with x-www-form-urlencodedcontent type header as follows:

login(username, password): Observable<any> {
    return this.http.post('/login', {
      username: username,
      password: password
      },
      {
        headers: new HttpHeaders()
          .set('Content-Type', 'x-www-form-urlencoded')
      }
      );

Unfortunately my API says that I sent empty username and password.

so I decided to make a postman request to my login endpoint and see where the problem comes from, and the postman request did return the username and password.

How comes that when I'm posting from postman my API return my username and password and when I post from my Angular app my API returns empty values? Is there anything I'm missing?

Answer 1

You're posting JSON data to the API instead of form data. The snippet below should work.

login(username, password): Observable<any> {
  const body = new HttpParams()
    .set('username', username)
    .set('password', password);

  return this.http.post('/login',
    body.toString(),
    {
      headers: new HttpHeaders()
        .set('Content-Type', 'application/x-www-form-urlencoded')
    }
  );
}