web-dev-qa-db-fra.com

Angular 2 http post params and body

J'essaie de faire un appel api depuis mon application angular. Ce que je veux faire, c'est envoyer une demande de publication à l'API avec un paramètre de commande. J'ai fait beaucoup de tests côté serveur ainsi que de passer en revue la demande sortante, et les données $_POST Ni body ne sont jamais là. Je suis donc à peu près sûr que le problème réside dans ce morceau de code.

public post(cmd: string, data: object): Observable<any> {

    const params = new URLSearchParams();
    params.set('cmd', cmd);

    const options = new RequestOptions({
      headers: this.getAuthorizedHeaders(),
      responseType: ResponseContentType.Json,
      params: params,
      body: data,
      withCredentials: false
    });

    console.log('Options: ' + JSON.stringify(options));

    return this.http.post('http://t2w.dev/index.php', data, options)
      .map(this.handleData)
      .catch(this.handleError);
  }

J'ai essayé de nombreuses structures JSON différentes en tant que data, mais voici l'essentiel de ce que j'essaie d'envoyer:

{
  "Username": "No thanks",
  "Password": "Donno"
}

this.handleData Et this.handleError Sont une méthode prenant les données et les erreurs comme arguments et renvoyant exactement ce que je veux.

L'API est configurée pour enregistrer tout ce qui passe via $_POST, Ce qui fonctionne bien lorsque vous exécutez une demande depuis n'importe quel endroit, à l'exception de mon application angular. Ce que j'ai fait jusqu'à présent:

  1. Passer une requête brute au lieu de URLSearchParams.
  2. Passer la demande sans corps.
  3. Passer toutes les valeurs dans RequestOptions.
  4. Passer des paramètres sous forme de chaîne.
  5. Corps passant en tant que params.
  6. Passer le corps en tant que JSON.stringify ({"Nom d'utilisateur": "Non merci", "Mot de passe": "Donno"}

Sortie de la console de RequestOptions

Options: {"method": null, "en-têtes": {"Content-Type": ["application/json"], "Accepter": ["application/json"], "X-CLIENT-ID": [" 380954038 "]," X-CLIENT-SECRET ": [" 5BgqRO9BMZ4iocAXYjjnCjnO7fHGN59WP8BTRZ5f "]}," body ":" {} "," url ": null," paramètres ":" ",", ",", ",", " {}, "paramsMap": {}}, "withCredentials": false, "responseType": 1} VM8529: 1 Le chargement XHR terminé: POST " http: // t2w .dev/index.php ".

Quelqu'un sait-il pourquoi les données ne sont jamais envoyées?

angularangular-http
12
SlyOtis

Et ça marche, merci @trichetriche. Le problème était dans mon RequestOptions, apparemment, vous ne pouvez pas passer params ou body au RequestOptions lorsque vous utilisez la publication. Supprimer l'un d'eux me donne une erreur, supprimer les deux et cela fonctionne. Toujours pas de solution finale à mon problème, mais j'ai maintenant quelque chose à travailler avec. Code de travail final.

public post(cmd: string, data: string): Observable<any> {

    const options = new RequestOptions({
      headers: this.getAuthorizedHeaders(),
      responseType: ResponseContentType.Json,
      withCredentials: false
    });

    console.log('Options: ' + JSON.stringify(options));

    return this.http.post(this.BASE_URL, JSON.stringify({
      cmd: cmd,
      data: data}), options)
      .map(this.handleData)
      .catch(this.handleError);
  }
7
SlyOtis

Le deuxième paramètre de http.post est le corps du message, c’est-à-dire la charge utile et non les paramètres de recherche d’URL. Passez data dans ce paramètre.

De la documentation

post(url: string, body: any, options?: RequestOptionsArgs) : Observable<Response>

public post(cmd: string, data: object): Observable<any> {

    const params = new URLSearchParams();
    params.set('cmd', cmd);

    const options = new RequestOptions({
      headers: this.getAuthorizedHeaders(),
      responseType: ResponseContentType.Json,
      params: params,
      withCredentials: false
    });

    console.log('Options: ' + JSON.stringify(options));

    return this.http.post(this.BASE_URL, data, options)
      .map(this.handleData)
      .catch(this.handleError);
  }

Modifier

Vous devriez également vérifier le 1er paramètre (BASE_URL). Il doit contenir l'URL complète (chaîne de requête moins) que vous souhaitez atteindre. Je mentionne en raison du nom que vous lui avez donné et je ne peux que deviner quelle est la valeur actuelle (peut-être juste le domaine?).

De plus, il n'est pas nécessaire d'appeler JSON.stringify sur les données/données utiles envoyées dans le corps http.

Si vous ne parvenez toujours pas à atteindre votre point final, consultez l'activité réseau du navigateur dans la console de développement pour voir ce qui est envoyé. Vous pouvez ensuite déterminer si le bon point final est appelé avec le bon en-tête et le bon corps. S'il semble que cela soit correct, utilisez POSTMAN ou Fiddler ou quelque chose de similaire pour voir si vous pouvez atteindre votre terminal de cette façon (en dehors de Angular).

9
Igor

Oui, le problème est ici. C'est lié à votre syntaxe.

Essayez d'utiliser ceci

return this.http.post(this.BASE_URL, params, options)
  .map(data => this.handleData(data))
  .catch(this.handleError);

au lieu de

return this.http.post(this.BASE_URL, params, options)
  .map(this.handleData)
  .catch(this.handleError);

En outre, le deuxième paramètre est censé être le corps, pas les paramètres de l'URL.

0
Maryannah

Let dit notre backend ressemble à ceci:

public async Task<IActionResult> Post([FromBody] IList<UserRol> roles, string notes) {
}

Nous avons un HttpService comme ceci:

    post<T>(url: string, body: any, headers?: HttpHeaders, params?: HttpParams): Observable<T> {
        return this.http.post<T>(url, body, { headers: headers, params});
    }

Voici comment nous pouvons passer le corps et les notes en paramètre: // comment l'appeler

const headers: HttpHeaders = new HttpHeaders({
    'Authorization': `Bearer XXXXXXXXXXXXXXXXXXXXXXXXXXX`
});

const bodyData = this.getBodyData(); // get whatever we want to send as body

let params: HttpParams = new HttpParams();
params = params.set('notes', 'Some notes to send');

this.httpService.post<any>(url, bodyData, headers, params);

Cela a fonctionné pour moi (avec angular 7 ^), j'espère que c'est utile pour quelqu'un.

0
Jhonman681