web-dev-qa-db-ja.com

Angular 2 http post params and body

angularアプリからAPI呼び出しをしようとしています。私がやりたいのは、コマンドparamを使用して投稿リクエストをAPIに送信することです。発信要求を通過するだけでなく、サーバー側で多くのテストを行いましたが、$_POSTもbodyデータも存在しません。したがって、問題はこのコード内にあると確信しています。

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);
  }

dataとしてさまざまなJSON構造を試しましたが、これが私が送信しようとしているものの中核です：

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

this.handleDataとthis.handleErrorは、データとエラーを引数として取るメソッドで、必要なものを返します。

APIは、angularアプリ以外のどこからでもリクエストを実行するときに正常に動作する$_POSTを介して着信するものをすべて記録するように設定されています。これまでにやったこと：

  1. URLSearchParamsの代わりに生のクエリを渡します。
  2. ボディなしでリクエストを渡す。
  3. RequestOptionsのすべての値を渡します。
  4. パラメータを文字列として渡します。
  5. 本体をパラメーターとして渡します。
  6. 本文をJSON.stringify（{"Username"： "No thanks"、 "Password"： "Donno"}として渡す

RequestOptionsのコンソール出力

オプション：{"method"：null、 "headers"：{"Content-Type"：["application/json"]、 "Accept"：["application/json"]、 "X-CLIENT-ID"：[" 380954038 "]、" X-CLIENT-SECRET "：[" 5BgqRO9BMZ4iocAXYjjnCjnO7fHGN59WP8BTRZ5f "]}、" body "：" {} "、" url "：null、" params "：{" rawParams "：" "、" queryEncoder "： {}、 "paramsMap"：{}}、 "withCredentials"：false、 "responseType"：1} VM8529：1 XHRの読み込みが完了しました：POST " http://t2w.dev/ index.php "。

データが送信されない理由は誰にもわかりませんか？

angularangular-http
12
SlyOtis

@trichetricheに感謝します。問題は私のRequestOptionsにありました。明らかに、投稿の使用中にparamsにbodyまたはRequestOptionsを渡すことはできません。どちらかを削除するとエラーが発生し、両方を削除すると機能します。まだ私の問題に対する最終的な解決策はありませんが、私は今、何か作業をする必要があります。最終的な作業コード。

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

http.post の2番目のパラメーターはメッセージの本文、つまりペイロードであり、URL検索パラメーターではありません。そのパラメーターにdataを渡します。

ドキュメント から

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);
  }

編集

また、最初のパラメーター（BASE_URL）もチェックアウトする必要があります。到達したい完全なURL（クエリ文字列を除く）が含まれている必要があります。あなたがそれを与えた名前のために私は言及し、私は現在の値が何であるかしか推測できません（たぶんドメインだけでしょうか？）。

また、http本文で送信されるdata/payloadでJSON.stringifyを呼び出す必要もありません。

それでもエンドポイントに到達できない場合は、開発コンソールでブラウザーのネットワークアクティビティを調べて、送信されているものを確認します。次に、正しいヘッダーとボディを使用して正しいエンドポイントが呼び出されているかどうかをさらに判別できます。正しいと思われる場合は、POSTMANまたはFiddlerなどを使用して、エンドポイントをそのように（Angularの外で）ヒットできるかどうかを確認します。

9
Igor

はい、問題はここにあります。それは構文に関連しています。

これを使ってみてください

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

の代わりに

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

また、2番目のパラメーターは、urlパラメーターではなく、本文であると想定されています。

0
Maryannah

バックエンドが次のように見えるとしましょう：

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

次のようなHttpServiceがあります。

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

次に、パラメーターとして本文とメモを渡す方法を示します。//呼び出し方法

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);

（angular 7 ^を使用して）私にとってはうまくいきました。

0
Jhonman681