バックエンドポストリクエストがbody jsonオブジェクトを使用してパラメーターを渡すのではなく、クエリを使用してパラメーターを渡すという問題を解決します

この問題は、私がコンテンツタイプについてあまり知らないという事実からまだ生じています 

postリクエストはjsonオブジェクトのみを渡すことができるといつも思っています。getはスプライシングのkey = valueです。次の図に示すように、プロジェクトのapiドキュメントのバックエンドポストリクエストがリクエストの本文ではなく、「URLのスプライス」であることがわかりました。

私はバックエンドを見つけることを誓ったが、結局私はあまりにも知らないことがわかった。これで記録。

1.プロジェクトは、axiosがリクエストを送信するときのparamsとdataの違いについてaxiosを使用します。

1. paramsがURLのリクエスト文字列に追加され、取得リクエストに使用されます。

2.データは、ポストリクエストのjsonオブジェクトをリクエストボディ（ボディ）に追加するためのものです。

3. Getリクエストはクエリパラメータのみを渡すことができ、クエリパラメータはすべてリクエストアドレスで綴られています
4. Postは本文とクエリパラメータの両方を渡すことができます

注：getはデータを渡すことができません

getリクエストでは、axiosはURLスプライシングの形式に渡されたオブジェクトを解析します

ポストリクエストの場合、Key-Valueペアデータを使用して、key1 = value1＆key2 = value2の形式などのパラメータを渡したい場合、2つの実装方法があります。

（1） qsライブラリのqs.stringifyメソッドで実現できます

（2）データなしでパラメーターを渡す  

2. content-typeについて：

1. Content-Typeがapplication / jsonに設定されると、jsonオブジェクトの形式でバックエンドに渡されます

2. Content-Typeがapplication / x-www-form-urlencodedまたはContent-Type：multipart / form-dataに設定されている場合、key = valueの形式でバックエンドに送信されます

3. 2つの違いは、データ送信方法ではなく、Content-Type設定が異なるためだけです。これらの送信は両方ともデータを入れbodyますが、Chromeブラウザの開発者ツールは、このContentTypeに従って表示方法を区別します。同時に、バックエンドの受信方法が異なります。

3.フォームの2つのエンコード方式の違い：application / x-www-form-urlencodedとmultipart / form-data：

まず、application / x-www-form-urlencodedがデフォルトのエンコード方式です。

1.フォームのアクションが取得されると、ブラウザーはx-www-form-urlencodedのエンコード方式を使用してフォームデータをkey = valueの形式にエンコードし、この文字列をURLの後ろにスプライスします。

2.フォームのアクションがpostの場合、ブラウザはフォームデータをhttp本文にカプセル化し、それをサーバーに送信します。

3. type = fileがない場合は、デフォルトのapplication / x-www-form-urlencodedを使用します。

4. type = fileがある場合は、multipart / form-dataエンコーディングを使用します。

4番目に、qsライブラリの使用法は次のとおりです。

1. npmインストール

npm install qs 
// cnpm install qs

2.インポート（通常、httpリクエストを定義するファイル内）

import qs from 'qs'

3.使用（以下は、プロジェクトにパッケージ化された2つのタイプのポストの比較です）

// 拼接url 
post(path, data) {
    return this.init('POST', path, qs.stringify(data))

  }

// json对象
  postByJson(path,data){
    return this.init('POST', path, data,{
      'Content-Type': 'application/json'
    })
  }