AxiosでのPost時の内容 type 'application/octet-stream' not サポートされているハンドルリング(415エラー)

だんだん暖かくなってきましたが、今日も私の気持ちは不安定です.

明らかに、POSTMANコールは平和なAPIであり、正常に動作し、問題はありません.
stringは画像とJSON形式で入ります.
しかし、前置きで415の間違いをずっと言っているのではないでしょうか.

415エラー

私は思わず415の間違いを調べた.
contentTypeを確認すれば大丈夫ですajaxとcontrollerのcontentTypeが一致しない場合に発生します.場合によっては、データが正常に転送されず、エラーが発生する可能性があります.
うん、なるほど.バックエンドコントローラでは、multipart/form-dataに移動していないようです.
だから私は楽屋で彼を見た.
2022-03-25 14:11:21.496  WARN 1 --- [io-8080-exec-10] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/octet-stream' not supported]
今回も初めて見るContent Typeがありました

application/octet-stream

8ビットストリームは、その名の通り、8ビットバイナリデータです.
特に表示できるプログラムが存在しないデータについては、octet-streamをデフォルト値として使用します.
≪コンテンツ｜Contents｜ldap≫:Dispositionヘッダーを添付ファイルにズームして、データを受信するブラウザ設定ファイルを保存するか、保存するかを指定できます.
ただし、octet-streamタイプはすべてのデータに使用することは推奨されません.
出典:https://dololak.tistory.com/130[象を冷蔵庫に入れる方法]

multipart/form-data

あ、なるほど…!
複数部分フォーム:HTMLのフォームタグにおいて、POSTなどを使用して複数のデータをバンドルして転送する場合、以下のようになります.
私のコードでheaderについて詳しく説明したかもしれませんが、formdataに画像とjsonを追加する過程で、正しく入っていないようです.
formdataフォーマットの値は無条件にstringに変換されます.
blobオブジェクトとテキストフォーマットのデータしか追加できないようです.(ファイルもblobオブジェクトに属する)
したがって、formdataタイプでjsonタイプのデータを送信する場合は、blob関数を使用してラップし、2番目のパラメータtype:[アプリケーション/json]を使用して一緒に入れる必要があります.

質問(JSON.stringgify)

楽屋にいます.jsonでdtoを受け取り、reactではJSONです.stringgifyでjavascript objectを生成して送信したため、415エラーが発生しました.

解決策

JSON.stringgifyでjavascriptオブジェクトを生成し、blobオブジェクトのタイプをアプリケーション/jsonとして作成し、formdataに添付すればよい.
そうはいかない.💩

fd.append("dto", JSON.stringify(inputs);

これでいい

const json = JSON.stringify(inputs);
const blob = new Blob([json], { type: "application/json" });
fd.append("dto", blob);