[Next.js] fetchのPOST通信時に415エラーを解消させたい

実現したいこと

JavaScript（Next.js）で自作アプリを作っています。
サーバーサイド言語とフロントを別々にして作っていて、フロント側でfetchでPOST通信したいのですが、415エラーでうまくいきません。

初歩的な質問になってしまうと思いますが
解消方法をご存じの方いたらよろしくお願いしまします。

発生している問題・分からないこと

先述したとおり、フロント側でfetchでPOST通信した際に、415エラーでうまくいきません。
ブラウザのエラー情報など一通り見たり、ヘッダー情報なども修正したりしましたが、それでもうまくいきませんでした。

ブラウザのDevツールのネットワーク内の情報↓

※localhost:3000は同時にデバック起動させてるバックエンド側のサーバーです。

該当のソースコード

export   function fetchAuth() {
const formData = new FormData();
formData.append('name', 'tanaka'); // ひとまずサーバーへ達成させたいので仮に簡易的なフォーム情報を設定

// POSTリクエストのオプション
const requestOptions = {
  method: 'POST', // POSTメソッド
  body: formData, // フォームデータを送信
  cache: 'no-store', // キャッシュ無効化
};

// fetchを使ってリクエストを送信
  // fetchを使ってリクエストを送信
  fetch(`http://localhost:3000/aaa`, requestOptions)
    .then(response => {
      if (!response.ok) {         //A
        throw new Error('Network response was not ok');
      }
      return response.json(); // レスポンスをJSONとして解析         //B
    })
    .then(data => {
      console.log('Success:', data); // 成功時のデータ処理         //C
    })
    .catch(error => {
      console.error('Error:', error); // エラー発生時の処理         //D
    });
}
※ABCDにブレークポイントを設定してもデバック中はいずれの箇所も達しなかったです。

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ヘッダー情報など色々ためしたが、依然として415エラーでうまくいきません。

補足

特になし

行動規範の内容に同意します

回答1件

ベストアンサー

415 Unsupported Media Typeエラーはリクエスト時のMIMEタイプ(Content-Typeヘッダに設定されている)がサーバー側が期待しているものと違うよ、ってことです。
https://developer.mozilla.org/ja/docs/Web/HTTP/Status/415

FormDataだと、multipart/form-dataっていうMIMEタイプがリクエスト時に付与されてるはずです。
ですので、フロント側だけじゃなくてバックエンド側のコードも開示してもらわないと確かなことはわからないですね。

なのでとりあえず今の情報だけでの推測になりますが、今の段階で考えられそうなのは単にバックエンド側の設定ミス、或いは、送信時のデータ形式が間違ってる(例えばJSONで受け取るように設定してるのにFormDataを送ってしまってるとか）が考えられます。

投稿2024/09/29 14:40