[解決済み】Chromeの開発ツールのネットワークタブに表示される「リクエストペイロード」と「フォームデータ」の違いとは？

質問

私は古いWebアプリケーションをサポートしなければなりません（私が書いたものではありません）。

フォームに入力して送信すると、Chrome の "Network" タブを確認すると、通常は "Form Data" が表示されるところに "Request Payload" が表示されています。この2つの違いは何ですか？また、どのような場合に一方がもう一方の代わりに送信されるのでしょうか？

ググってみても、これを説明する情報は見つかりませんでした（ただ、javascriptアプリが"Request Payload"の代わりに"Form Data"を送るようにしようとしている人たちがいました。

解決方法は？

リクエストペイロード、より正確には HTTPリクエストのペイロードボディ

• が通常送信するデータです。 POST または PUT リクエスト . ヘッダーの後の部分と CRLF の HTTPリクエスト .

というリクエストは Content-Type: application/json は次のようになります。

POST /some-path HTTP/1.1
Content-Type: application/json

{ "foo" : "bar", "name" : "John" }

これをAJAXで送信すると、ブラウザは単にペイロード・ボディとして送信されたものを表示します。データがどこから来るのか分からないので、できることはそれだけです。

HTML-Formに method="POST" と Content-Type: application/x-www-form-urlencoded または Content-Type: multipart/form-data のようなリクエストになります。

POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencoded

foo=bar&name=John

この場合、form-dataはリクエストペイロードです。ブラウザはさらに、bar が送信されたフォームの input-field foo の値であることを知っています。そして、それがあなたに表示されているのです。

つまり、両者の違いは Content-Type が、データの送信方法には違いがありません。どちらの場合も、データはmessage-bodyの中にあります。そしてChromeは、デベロッパーツールでデータがどのように表示されるかを区別しています。