POSTのペイロードをどのContent-Typeで送信するか

TL;DR

• プロダクトごとに統一できると嬉しい
• 筆者的にはmultipart/form-dataがおすすめ
  • しかし、バックエンド側のパース処理が複雑になるケースがあるのでその場合は、x-www-form-urlencodedがおすすめ

POST、PUTメソッドのペイロードでよく使われるContent-Type

• application/json
  • レスポンスのContent-Typeでは、おそらくこれが一番多いんじゃないか
  • JavaScriptで処理する場合はとても楽
  • しかし、TypeScriptでは型定義しないと危ないので他と比べるとコストが大きい気がする
  • 画像などのバイナリファイルをこれで送信するのは「技術的には可能」だが現実的ではない
• x-www-form-urlencoded
  • hoge=123&huga=aaaのようなURLクエリパラメータをペイロードに入れたような形式
  • 基本的には、format stringで組み立てるのはインジェクションされる可能性があり危険なのでencodeURIComponent()で値をエンコードしてあげる必要がある
    • encodeURI()という関数も存在するが違いはMDNを参照するとわかりやすい
    • URLSearchParams()を使うと.set()メソッドが使えて簡単にクエリパラメータを組み立てられて便利¹
    • URLSearchParams()の引数にFromDataを入れると変換が可能
      • しかし、FromDataにファイルが入っている場合うまく変換できないためTypeScriptではURLSearchParams()の仮引数にFormDataを渡せない²
        • この場合、FromData内にファイルが存在しないことが確定しているのであればURLSearchParams(from as any)にしてしまってもRuntimeエラーは発生しない
• multipart/from-data
  • FromDataクラスがあるのでJavaScriptからは楽に送信できる
  • しかし、JS以外からは結構大変³なので避けられがち？
    • 外部APIとかでこれは見たこと無い
  • ファイルを送信する場合、これ一択な気がする
• application/graphql
  • GraphQLを使う場合のContent-Type
  • 特筆することは無い

筆者のおすすめ

multipart/form-dataが個人的には大好きです。以下のようにfetchのdataに渡すだけで使えます。

const from = new FromData();
from.append('key', 'value');
form.append('image', image);

const res = await fetch('/api', {
    method: 'POST',
    data: form
});

バックエンド側では、Goを使えばr.FormFile("file")のように簡単に取得できるので便利です。デメリットとしては、x-www-form-urlencodedなどと比べるとペイロードのデータ量が比較的大きいのが挙げられます。

文字列だけの場合はx-www-form-urlencodedにして、画像のアップロードなどはmultipart/form-dataにするというのも良いかもしれません。

また、OIDCのGETでもPOSTでもどちらでも使用可能なAPIエンドポイント⁴などを実装する場合はx-www-form-urlencodedが必須になるのかなと思います。

1. Form で submit されたデータの収集と FormData & URLSearchParams | blog.jxck.io ↩

2. allow constructing URLSearchParams directly from FormData · Issue #30584 · microsoft/TypeScript ↩

3. Goなどはmultipart package - mime/multipart - Go Packagesパッケージなどがあり、こういうので組み立てると良い。 ↩

4. Final: OpenID Connect Core 1.0 incorporating errata set 1などはAuthorization Servers MUST support the use of the HTTP GET and POST methods defined in RFC 2616 [RFC2616] at the Authorization Endpoint.とあるようにGETとPOSTメソッドで実装しなければいけない。 ↩