J'essaye de faire un appel de connexion au back-end Java avec le front-end Angular8. La fonctionnalité fonctionne bien dans Postman mais lance 400 dans Angular. L'appel ressemble à ceci:
POST /api/auth/login HTTP/1.1 Host: localhost:8080 Connection:
keep-alive Content-Length: 37 Accept: application/json, text/plain,
*/* Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36
Content-Type: application/json
Referer: http://localhost:4200/login Accept-Encoding: gzip, deflate,
Accept-Language: en-US,en;q=0.9,pl;q=0.8
Quand je regarde dans la console du navigateur, ma demande ressemble à ceci:
login(username: string, password: string) {
let headers = new HttpHeaders();
headers.set("Content-Type", "application/x-www-form-urlencoded");
headers.set("Accept", "application/json");
let options = {
headers: headers,
params: new HttpParams()
}
let payload = {"username": username, "password": password};
let response = this.http.post<any>(environment.BASE_URL+'/api/auth/login', payload, options);
console.log(response);
return response;
}
Pour certaines raisons, mes en-têtes J'ai défini ne sont pas inclus et le type de contenu est par défaut "application / json", pas x-form comme je le souhaite. La charge utile est là mais les options ne le sont pas. C'est probablement la raison de l'erreur alors pourquoi mes en-têtes ne sont pas acceptés, qu'est-ce qui ne va pas ici?
3 Réponses :
Supposez que votre backend ressemble à ceci:
public getLoginData(username: string, password: string): any {
const data = new FormData();
data.append('username', username);
data.append('password', password);
return this.http.post<any>(environment.BASE_URL + '/api/auth/login', data);
}
Essayez-le avec FormData
@RequestMapping(path = "/api/auth/login", method = RequestMethod.POST)
public Collection getLoginData(@RequestParam("username") String username,
@RequestParam("password") String password) {
return this.service.getLoginData(username, password);
}
Votre réponse est également presque correcte, mais les données doivent être "référencées", comme dans l'exemple ci-dessous d'Ammar
Essayez ce code. Vous devez définir la référence à l'objet d'origine.
login(username: string, password: string) {
let headers = new HttpHeaders();
headers = headers.append("Content-Type", "application/x-www-form-urlencoded");
headers = headers.append("Accept", "application/json");
let options = {
headers: headers,
params: new HttpParams()
}
let payload = {"username": username, "password": password};
let response = this.http.post<any>(environment.BASE_URL+'/api/auth/login', payload, options);
console.log(response);
return response;
}
au premier coup d'œil, je ne pouvais pas voir la différence :) Si petit changement mais faire une différence. La seule chose est que la charge utile x-form doit aller à HttpParams, pas à la charge utile et cela fonctionne. Une autre façon est d'utiliser URLSearchParams comme charge utile, je pense (je n'ai pas essayé)
Donc, un exemple vraiment fonctionnel ressemble à ceci:
login(username: string, password: string): Observable<LoggedUser> {
let headers = new HttpHeaders();
headers = headers.append('Content-Type', 'application/x-www-form-urlencoded');
headers = headers.append('Accept', 'application/json');
let params = new HttpParams();
params = params.set('username', username);
params = params.set('password', password);
const options = {
headers,
params
};
return this.http.post<LoggedUser>(environment.BASE_URL + '/api/auth/login', {}, options);
}
La méthode post renvoie un Observable. Vous devez donc vous y abonner pour le connecter.
this.http.post (environment.BASE_URL + '/ api / auth / login', payload, options) .subscribe (res => console.log (res)); mais cela ne le fait pas ' t résoudre votre problème :).