web-dev-qa-db-fra.com

Angular 6 requête de publication http avec données x-www-form-urlencoded

J'ai essayé de faire une demande de publication à mon API sauvegardée pour publier des données. J'ai essayé cette API en utilisant postman et cela fonctionne très bien et les données sont renvoyées correctement. Cependant, lorsque j'essaie de faire la même chose à partir de mon application ionique-angulaire, cela ne fonctionne pas du tout. J'ai essayé la plupart des méthodes disponibles sur le Web, mais en vain. Je crée cette application avec Angular v6.0.8 et Ionic framework v4.0.1. L'API attend des données d'application/x-www-form-urlencoded dans le corps de la demande (nom d'utilisateur, mot de passe et grant_type inclus). J'ai essayé d'utiliser à la fois l'héritage http et le nouveau module httpClient, mais pas de chance. Jusqu'à présent, j'ai essayé d'utiliser URLSearchParams/JSONObject/HttpParams pour créer le corps de la demande. Pour les en-têtes I utilisé HttpHeaders () pour envoyer application/x-www-form-urlencoded comme Content-Type. Aucune de ces méthodes ne fonctionne.

Quelqu'un peut-il m'aider?

PFB l'une des méthodes que j'ai essayées jusqu'à présent.

Merci, Atul

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class AuthService {

    constructor(private http: HttpClient) {

    }

    signin(username: string, password: string){
        const formData = new FormData();
        formData.append('username', username);
        formData.append('password', password);
        formData.append('grant_type', 'password');

        this.http.post(apiUrl,formData,
                      {
                          headers: new HttpHeaders({
                            'Content-Type':'application/x-www-form-urlencoded'
                          })
                      }
                    )
                    .subscribe(
                        (res) => {
                            console.log(res);
                        },
                        err => console.log(err)
                    );
    }
}
angularionic-frameworkhttpclient
5
Atul Rauthan

J'essayais simplement d'obtenir un jeton oauth d'un point de terminaison, et ce que je peux dire, c'est vraiment difficile de trouver une réponse qui fonctionne.

Voici comment je l'ai fait fonctionner dans Angular 7 mais cela fonctionnera également dans Angular 6

import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';

    login(user: string, password: string) {
        const params = new HttpParams({
          fromObject: {
            grant_type: 'password',
            username: user,
            password: password,
            scope: 'if no scope just delete this line',
          }
        });

        const httpOptions = {
          headers: new HttpHeaders({
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': 'Basic ' + btoa('yourClientId' + ':' + 'yourClientSecret')
          })
        };

        this.http.post('/oauth', params, httpOptions)
          .subscribe(
            (res: any) => {
              console.log(res);
              sessionStorage.setItem('access_token', res.access_token);
              sessionStorage.setItem('refresh_token', res.refresh_token);
            },
            err => console.log(err)
          );
      }

Si vous obtenez des erreurs cors, configurez simplement un angular:

//proxy.conf.json
{
  "/oauth": {
    "target": "URL TO TOKEN ENDPOINT",
    "changeOrigin": true,
    "secure": false,
    "logLevel": "debug",
    "pathRewrite": {
      "^/oauth": ""
    }
  }
}
13
Avram Virgil

Vous n'avez pas besoin de JSON.stringify(formData) passez simplement le formData comme deuxième paramètre pour la méthode http.post.

créer une instance de FormData. Et ajoutez les valeurs que vous devez envoyer à l'aide de la fonction formData.append().

Et le httpHeaders comme ça.

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/x-www-form-urlencoded'
  })};

const formData = new FormData();
formData.append('username', username);
formData.append('password', password);
formData.append('grant_type', 'password');

this.http.post(apiUrl,formData,httpOptions)
                    .subscribe(
                        (res) => {
                            console.log(res);
                        },
                        err => console.log(err)
                    );
5
Anuradha Gunasekara
The key "grant_type" may not be taking due to underscore. Try removing underscore.

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class AuthService {

    constructor(private http: HttpClient) {

    }

    signin(username: string, password: string){
        const formData = {
       'username': 'abc',
       'password': 'abc@123',
       'granttype': 'abc@123'
       }

        this.http.post(apiUrl,formData)
                    .subscribe(
                        (res) => {
                            console.log(res);
                        },
                        err => console.log(err)
                    );
    }
}
0
Manzer