Demande POST de HttpClient utilisant x-www-form-urlencoded

Question

J'essaye de faire une requête POST avec x-www-form-urlencoded comme suit :

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

Malheureusement, mon API indique que j'ai envoyé un nom d'utilisateur et un mot de passe vides.

J'ai donc décidé d'envoyer une requête postman à mon point de connexion pour voir d'où venait le problème. La requête postman a bien renvoyé le nom d'utilisateur et le mot de passe.

Comment se fait-il que lorsque je poste depuis postman, mon API renvoie mon nom d'utilisateur et mon mot de passe et que lorsque je poste depuis mon application Angular, mon API renvoie des valeurs vides ? Est-ce qu'il y a quelque chose qui m'échappe ?

Answer 1

Vous envoyez des données JSON à l'API au lieu de données de formulaire. L'extrait ci-dessous devrait fonctionner.

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

Answer 2

Il existe un moyen plus facile que les autres approches décrites ici.

C'est ce qui a fonctionné pour moi avec Angular 7 :

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

this.http.post(url, payload);

Il n'est pas nécessaire de définir explicitement l'en-tête avec cette approche.

Notez que l'objet HttpParams est immuable. Donc, si vous faites quelque chose comme ce qui suit, cela ne fonctionnera pas, vous obtiendrez un corps vide :

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

this.http.post(url, payload);

Answer 3

Vous pouvez aussi bien charger vos données à partir d'un objet

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

Answer 4

Vous pouvez faire une demande de poste comme ci-dessous.

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

après cela, il faut s'abonner.