CODEWITHSUNDEEP
angular
TheUnreal
TheUnreal

Reputation: 24472

HttpClient POST request using x-www-form-urlencoded

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?

Upvotes: 69

Views: 79303

Answers (4)

KielSoft
KielSoft

Reputation: 433

You can as well as load your data from an object

login(username, password): Observable<any> {
    const body = new HttpParams({
        fromObject: {
            username,
            password,
            ...extraData, // if any 
        }
    });

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

Upvotes: 2

Robert Hegner
Robert Hegner

Reputation: 9376

There is an easier way than the others approaches described here.

This is what worked for me with Angular 7:

const payload = new HttpParams()
  .set('username', username)
  .set('password', password);

this.http.post(url, payload);

No need to explicitly set the header with this approach.

Note that the HttpParams object is immutable. So doing something like the following won't work, it will give you an empty body:

const payload = new HttpParams();
payload.set('username', username);
payload.set('password', password);

this.http.post(url, payload);

Upvotes: 36

Ricardo Oliveira
Ricardo Oliveira

Reputation: 21

You can to make a post request as below.

login(email:string, password:string):Observable<User>{
    let headers = new HttpHeaders();
    headers = headers.set('Content-Type', 'application/x-www-form-urlencoded')
    let params = new HttpParams().set('user', JSON.stringify({email: email,password:password}));
    return this.http.post<User>(`${MEAT_API_AUX}/login`,
    {},{headers: headers,params:params})
        .do(user => this.user = user);
}

after that you have to make subscribe.

Upvotes: -1

Owain van Brakel
Owain van Brakel

Reputation: 3349

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

Upvotes: 148

Related Questions