application/x-www-form-urlencoded完全に理解した

はじめに

application/x-www-form-urlencoded完全に理解したので共有です。
今までは、たまに見かけるけど、あんまり気にしてませんでした。適当に検索してたらなんとなく動く方法見つかるから、まぁいいかという感じで。
今回、Chrome の Developer tools と VSCode の Thunder Client って拡張機能と Node.js 上 の axios で動かす機会があったので、比較したり、もうちょい調べたりして、理解を深めてみました。

application/x-www-form-urlencoded

Content-Typeってヘッダーに入れるリクエスト本文の型の一つです。キー・バリュー型の情報を&で区切って送る感じです。<form>要素の入力を送るとき使われます。Percent-encoding (パーセントエンコーディング) することで、&とか=も送れるようにしてます。
application/jsonでええやんって気もしないでもないです。

参考：
ContentType: application/x-www-form-urlencoded の使い道 - Jaybanuan's Blog
HTTP の POST メソッドにおいてリクエストボディを URL エンコードする必要性はあるのでしょうか？
POST - HTTP | MDN
フォームデータの送信 - ウェブ開発を学ぶ | MDN

Developer tools

フォームのデータを送るときに Developer tools を開いていると、Network の Request Headers や Payload で色々みれます。
細かくて全部は調べきれないけど、ブラウザや API サーバーのライブラリ・フレームワークが勝手につけてくれてる情報のおかげで、いい感じに通信できてるんだと思います。

ヘッダーはこんな感じでみれます。

ペイロードはこんな感じでみれます。

Thunder Client

Thunder Clientっていう VSCode の拡張機能を使うと、GUI で楽に API にアクセスできます。クエリパラメータとかヘッダーとかボディとかいい感じにデータをセットできます。返ってくるデータもヘッダーと中身とで、それぞれ分けてみれたりします。
どんなデータをやりとりしてるか理解しやすくなります。パーセントエンコーディング（URL エンコーディング）も勝手にしてくれます。

参考：
Postman がいらなくなるかもしれない VSCode の拡張機能 Thunder Client がすごい

Axios

Axios使った場合はこんな感じでした。かなり抽象化されてて、Developer tools で見てる情報とは乖離が出ちゃう気がしてます。その場しのぎ的に動くもの作ってると HTTP の中身までイメージしにくいので、Developer tools とか Thunder Client で確認した上で Axios みたいなライブラリを使うようにすると良いのかなと思い始めてます。

var params = new URLSearchParams();
params.append("param1", "hoge");
params.append("param2", "fuga");
const hoge = await axios.post<TRes>("/url", params);

参考：
axios で POST する際、Content-type を application/x-www-form-urlencoded にしたい時どうするか - Qiita
URL-Encoding Bodies | Axios Docs

おわりに

HTTP のこういう仕様、苦手意識あったんですが、理解が深まって良かったです。
ドキュメントだけ読んでも、すぐ忘れるし、実装だけしてても動いたら OK ってしがちなので、今回両方できたので良かったなーと思いました。日々是精進すね。