☰

axios postリクエストはフォームデータを送信します 質問する

tag-icon • tag-icon reactjs react-redux axios ajaxform axios-cookiejar-support
axios postリクエストはフォームデータを送信します 質問する

axiosPOSTリクエストはコントローラーの URL にヒットしますが、POJO クラスに null 値を設定しています。Chrome の開発者ツールを使用すると、ペイロードにデータが含まれます。何が間違っているのでしょうか?

Axios POSTリクエスト:

var body = {
    userName: 'Fred',
    userEmail: '[email protected]'
}

axios({
    method: 'post',
    url: '/addUser',
    data: body
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

ブラウザの応答:

ここに画像の説明を入力してください

ヘッダーを次のように設定した場合:

headers:{
  Content-Type:'multipart/form-data'
}

リクエストがエラーをスローする

multipart/form-data の投稿中にエラーが発生しました。Content-Type ヘッダーに境界がありません

Postman で同じリクエストを行うと、正常に動作し、POJO クラスに値が設定されます。

境界を設定する方法、または axios を使用してフォーム データを送信する方法を説明できる人はいますか。

ベストアンサー1

axiosデータを投稿するには、フォームデータ()のように：

var bodyFormData = new FormData();

次に、送信するフォームにフィールドを追加します。

bodyFormData.append('userName', 'Fred');

画像をアップロードする場合は、.append

bodyFormData.append('image', imageFile);

そして、axios postメソッドを使用できます（それに応じて修正できます）

axios({
  method: "post",
  url: "myurl",
  data: bodyFormData,
  headers: { "Content-Type": "multipart/form-data" },
})
  .then(function (response) {
    //handle success
    console.log(response);
  })
  .catch(function (response) {
    //handle error
    console.log(response);
  });

関連する GitHub の問題:

'Content-Type': 'multipart/form-data' の .post を axios/axios で動作させることができません

おすすめ記事