Comment faire pour forcer Angular2 à l'aide de x-www-form-urlencoded
J'ai un projet qui nécessite l'utilisation de Angular2 (final) à la poste à un ancien, hérité de Tomcat 7 serveur fournissant un peu de REPOS-ish de l'API à l'aide .des pages jsp.
Cela a bien fonctionné lorsque le projet n'était qu'un simple JQuery application d'effectuer des requêtes AJAX. Toutefois, la portée du projet a pris une ampleur telle qu'il aura besoin d'être réécrit dans un cadre moderne. Angular2 l'air fantastique pour l'emploi, à une exception près: Il refuse d'effectuer des requêtes POST avec tout option, mais la mise en forme des données, ce qui l'API n'est pas extrait. L'API s'attend à ce que tout soit urlencoded, en s'appuyant sur Java request.getParameter("param")
syntaxe d'extraire des champs.
C'est un ciselée de mon utilisateur.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));
}
}
);
}
}
Peu importe ce que j'ai mis l'en-tête de type de contenu, il finit toujours par arriver à la non-codée de données de formulaire. C'est ne pas honorer l'en-tête de je suis.
Quelqu'un d'autre a rencontré ce? Comment allez-vous forcer Angular2 pour publier des données dans un format qui peut être lu par un vieux API Java à l'aide de request.getParameter("param")
?
Modifier: Pour quelqu'un d'autre qui trouve cela dans l'avenir, la solution est en fait très simple. Définir le corps du post comme ceci:
let body = `username=${username}&password=${password}`;`
Voir Brad exemple ci-dessous.
- Je pense qu'il est assez boiteux qui angulaire qui rend si difficile la poste
www-form-urlencoded
. Il devrait y avoir de soutien de première classe pour le faire facilement. - cela ne semble pas fonctionner avec Angular4+ et HttpClient.
- Vous avez raison, @stt106. Cette solution est vieux et spécifiques pour les versions inférieures à 4. Je vais réécrire la solution ci-dessus pour HttpClient quand j'ai le temps.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez faire cela en utilisant
URLSearchParams
que le corps de la demande et angulaire sera automatiquement défini le type de contenu àapplication/x-www-form-urlencoded
et coder correctement le corps.La raison pour laquelle il n'est pas actuellement en train de travailler pour vous est que vous n'êtes pas l'encodage de l'organisme de données dans le bon format et que vous êtes de ne pas définir les options d'en-tête correctement.
Vous devez encoder le corps comme ceci:
Vous devez définir les options d'en-tête comme ceci:
URLSearchParams
que le corps des données de formulaire et ne plus avoir de problèmes. Je pense qu'il a été introduit dans la RC4. Quelle est la version angulaire utilisez-vous?Angulaire 4.3+/5+ (Nouvelle HTTPClient) utiliser les éléments suivants:
Note 3 choses à faire fonctionner comme prévu:
Attention: les Anciens navigateurs avez besoin d'un polyfill! J'ai utilisé:
npm i url-search-params-polyfill --save
et ensuite ajouté à polyfills.ts:import 'url-search-params-polyfill';
HttpParams
au lieu de "vieux"URLSearchParams
?Pour ceux qui sont encore à la recherche d'une réponse, c'est comment je l'ai résolu avec Angulaire 5 et HttpClient:
Ne PAS set-tête Content-Type, angulaire allons résoudre ce problème pour vous!
Authorization
dans l'en-tête, dois-je le mettre sur leformData
que le bien ou le mettre dans leRequestOptions
?C'est ce qui a fonctionné pour moi Angulaire 7:
Pas nécessaire de définir explicitement l'en-tête avec cette approche.
Noter que le HttpParams objet est immuable. Afin de faire quelque chose comme ce qui suit ne marchera pas, ça va vous donner le corps est vide:
this.http.post(url, content);
censé êtrethis.http.post(url, payload)
?J'ai trouvé cette solution après avoir travaillé plusieurs heures sur cette question
}