Chrome 開発ツールのネットワーク タブに表示される「リクエスト ペイロード」と「フォーム データ」の違いは何ですか? 質問する

Chrome 開発ツールのネットワーク タブに表示される「リクエスト ペイロード」と「フォーム データ」の違いは何ですか? 質問する

サポートしなければならない古い Web アプリケーションがあります (私が作成したものではありません)。

フォームに記入して送信し、Chrome の「ネットワーク」タブを確認すると、通常は「フォーム データ」が表示される場所に「リクエスト ペイロード」が表示されます。この 2 つの違いは何ですか。また、一方が送信されるのはいつですか。

これを Google で検索しましたが、これを説明する情報は実際には見つかりませんでした (単に、JavaScript アプリに「リクエスト ペイロード」ではなく「フォーム データ」を送信させようとしている人々だけです)。

ベストアンサー1

リクエストペイロード - より正確には:HTTPリクエストのペイロード本体

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

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

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

これを AJAX で送信すると、ブラウザはペイロード本体として送信する内容を表示するだけです。データがどこから来ているのかがわからないため、ブラウザができることはそれだけです。

method="POST"およびContent-Type: application/x-www-form-urlencodedまたは を使用して HTML フォームを送信すると、Content-Type: multipart/form-dataリクエストは次のようになります。

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

foo=bar&name=John

この場合、フォームデータはリクエストペイロードです。ここでブラウザはより多くの情報を把握しています。つまり、bar は送信されたフォームの入力フィールド foo の値であることを認識しています。そして、それがブラウザに表示されるものです。

したがって、これらはContent-Typeデータの送信方法が異なりますが、送信方法は異なります。どちらの場合も、データはメッセージ本文にあります。また、Chrome は、開発者ツールでデータがどのように表示されるかを区別します。

おすすめ記事