Comment forcer Angular2 à POST en utilisant x-www-form-urlencoded ?

Question

J'ai un projet qui nécessite l'utilisation d'Angular2 (final) pour poster sur un vieux serveur Tomcat 7 fournissant une API de type REST à l'aide de pages .jsp.

Cela fonctionnait bien lorsque le projet n'était qu'une simple application JQuery effectuant des requêtes AJAX. Toutefois, l'ampleur du projet a pris une telle ampleur qu'il doit être réécrit à l'aide d'un framework plus moderne. Angular2 semble fantastique pour ce travail, à une exception près : Il refuse d'exécuter des requêtes POST en utilisant une autre option que des données de formulaire, que l'API n'extrait pas. L'API s'attend à ce que tout soit urlencodé, en s'appuyant sur la fonction Java request.getParameter("param") pour extraire des champs individuels.

Voici un extrait de mon fichier user.service.ts :

import { Injectable }    from '@angular/core';
import { Headers, Response, Http, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {
    private loggedIn = false;
    private loginUrl = 'http://localhost:8080/mpadmin/api/login.jsp';
    private headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});

    constructor(private http: Http) {}

    login(username, password) {
        return this.http.post(this.loginUrl, {'username': username, 'password':  password}, this.headers)
            .map((response: Response) => {
                let user = response.json();
                if (user) {
                    localStorage.setItem('currentUser', JSON.stringify(user));
                }
            }
        );
    }
}

Quel que soit le type de contenu de l'en-tête, il finit toujours par arriver sous forme de données de formulaire non codées. Il n'honore pas l'en-tête que j'ai défini.

Quelqu'un d'autre a-t-il rencontré ce problème ? Comment faire pour forcer Angular2 à POST des données dans un format qui peut être lu par une ancienne API Java en utilisant request.getParameter("param") ?

Editar : Pour tous ceux qui trouveront ce problème à l'avenir, la solution est en fait très simple. Définissez le corps du message comme ceci :

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

Voir l'exemple de Brad ci-dessous.

Answer 1

Pour Angular > 4.3 (nouveau HTTPClient), utilisez ce qui suit :

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 => {
        //...
    });

Notez 3 choses pour que cela fonctionne comme prévu :

1. Utilisez URLSearchParams pour votre corps
2. Convertir le corps en chaîne de caractères
3. Définir le type de contenu de l'en-tête

Attention : Les anciens navigateurs ont besoin d'un polyfill ! J'ai utilisé : npm i url-search-params-polyfill --save et ensuite ajouté à polyfills.ts : import 'url-search-params-polyfill';

Answer 2

MISE À JOUR juin 2020 : Cette réponse a 4 ans et n'est plus valable en raison des changements d'API dans Angular. Veuillez vous référer aux réponses plus récentes pour l'approche de la version actuelle.

---

Vous pouvez le faire en utilisant URLSearchParams en tant que corps de la requête et angular définira automatiquement le type de contenu à application/x-www-form-urlencoded et coder le corps correctement.

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

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

La raison pour laquelle cela ne fonctionne pas actuellement est que vous n'encodez pas les données du corps au bon format et que vous ne définissez pas correctement les options d'en-tête.

Vous devez coder le corps comme ceci :

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

Vous devez définir les options d'en-tête comme suit :

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

Answer 3

Pour ceux qui cherchent encore une réponse, voici comment j'ai résolu le problème avec Angular 5 et HttpClient :

const formData = new FormData();

// append your data
formData.append('myKey1', 'some value 1');
formData.append('myKey1', 'some value 2');
formData.append('myKey3', true);

this.httpClient.post('apiPath', formData);

Faites PAS Définir l'en-tête Content-Type, angular va le faire pour vous !

Answer 4

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 5

J'ai trouvé cette solution après avoir travaillé plusieurs heures sur ce problème.

login(userName: string, password: string) {
const headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'application/x-www-form-urlencoded');
headers.append( 'No-Auth', 'True');

const body = new URLSearchParams();
body.set('username', userName);
body.set('password', password);
body.set('grant_type', 'password');

return this.http.post(
    this.baseUrl + '/token'
   , body.toString()
   , { headers: headers }
  )
  .pipe(map(res => res.json()))
  .pipe(map(res => {
    localStorage.setItem('auth_token', res.auth_token);
    return true;
  }))
  .pipe(catchError((error: any) => {
    return Observable.throw(error);
  }));

}