Vue.jsのaxiosでのPOSTリクエストが400になってしまう

Question

前提

• Vue.js / Nuxt.js でWebアプリを開発しています
• 現在、axiosを利用して画像アップロード機能の開発をしている際にエラーに出くわしました
• 1時間ほど調べて色々試しましたが上手くいかなかったのでご意見をお聞かせください
• 私のスキル程度は本業ではなく趣味でプログラミングに関わるようになって半年ほどの者です
• axiosに慣れていません

実現したいこと

サーバーURLにPOSTリクエストをおこない、画像ファイルをアップロードしたい

発生している問題・エラーメッセージ

以下のエラーメッセージが表示され、サーバー側にファイルをアップロードできない

Error: Request failed with status code 400

該当のソースコード

  const formData = new FormData();
  formData.append("image", this.inputImage);
  const config = {
    method: "post",
    url: this.uploadURL,
    headers: {
      "Content-Type": "multipart/form-data",
    },
  };

  this.$axios(config)
    .then(function (res) {
      console.log(res);
      response.json(res.data);
    })
    .catch(function (err) {
      console.log(err); //このエラーが出ます
    });

// this.inputImageの内容はblobになっていて、
// "http://localhost/hogehoge"のような文字列です。

試したこと

試したこと1. formData周り

上記コードのformDataの "image"を"file"に変えてみたが、効果なし

試したこと2. HTMLフォームでの検証

以下のような単純なHTMLフォーム形式では正常にアップロードが完了できました。

<form
  action="URL_FOR_UPLOAD"
  method="post"
  enctype="multipart/form-data"
>
  <input type="file" name="file" />
  <input type="submit" />
</form>

補足情報（FW/ツールのバージョンなど）

• アップロード先のURLはCloudflare ImagesのワンタイムURLというもの（ドキュメントはこちら）
• 各種バージョン（Vue2.7.10, Nuxt2.15.8）

以上です。
その他不十分な点などありましたらご質問いただけると助かります。

追記

errorをerror.responseとすることで詳細のエラー内容がわかりました。以下の通りですが、私ではこれでもどうしたらよいか全くわかりません。

code: "101"
message: "content-type is not supported"

Answer 1

axiosの方のコードで、formData を送信に使っている様子がないのですが、そこは確認しましたか？

Comments

[html-man]

ありがとうございます。そうですね。なぜか全く気がつかなかったです。
そちら修正して試してみます。