こんにちは。最近SHIFTに入社した三輪です。SHIFT社内のプロダクト開発に従事しております。
今までAPI呼び出しではContent-typeは何気なくappliation/jsonで指定していましたが、application/x-www-form-urlencodedでないとダメ！と怒られる場面に遭遇したので、この2つの違いについて調べてみました。
しかし、そもそもContent-typeとは何なのか、メディアタイプとよく似ているが違うものなのか、理解していなかったのでそこから調べることにしました。

メディアタイプとは

画像、音声、動画、テキストなど、ファイル種類を表すための情報のことです。MIMEタイプとも呼ばれています
具体的にどんなものがあるかというと…

テキスト型 ・テキスト: text/plain ・HTML: text/html ・javascript: text/ javascript

画像型 ・GIF: image/gif ・JPEG: image/jpeg ・PNG: image/png

文書型 ・JSON: application/json ・PDF: application/pdf ・Word: application/msword

などなど、一覧はこちらで見れます。

見てわかる通り、A/Bという形式で表現されており、Aのことをタイプ、Bのことをサブタイプと呼びます。
タイプではそのデータ型が当てはまる大枠のカテゴリを表し、サブタイプではより正確なデータ型を表します。

余談ですがWindowsとMacOSとでCSVファイルのメディアタイプが違っており、もっと言うと、同じWindowsでもExcelがあるかないかでメディアタイプが異なります。
MacOS: text/csv
Windows(Excelあり): application/vnd.ms-excel
Windows(Excelなし): application/octet-stream

なので、ファイルアップロード機能でCSVファイルだけを許可する場合、メディアタイプではなく拡張子でバリデーションする必要があります。
初めてフロントエンドでCSVアップロード機能を実装した時は見事にこれにはまりました…
こんなん知らんとわかんねえよ…

Content-typeとは

HTTP通信において、ファイル種類を表すための情報を設定するためのヘッダー項目のこと。ここで指定する内容はメディアタイプを指定することが多いですが、文字エンコードであるcharsetや、データ境界値であるboundaryも必要に応じて指定もすることが出来ます。
ex. application/json; charset=UTF-8

メディアタイプと何が違うの？となってしまいますが、メディアタイプが情報そのものであるのに対し、Content-typeはHTTP通信のヘッダーにおいて、送信する情報がどのデータ型かを設定する項目名です。

Content-type = メディアタイプ + 文字コード + データ境界値

と理解しておけば問題ないでしょう。

application/jsonとapplication/x-www-form-urlencodedの違い

さて、本題に入っていきましょう。この2つはタイプが同じで、サブタイプが異なることになります。

application/json

jsonフォーマットのことで、エンジニアならよく知っている形式ですね。
{ "title": "test", "number": 1 }みたいな形になるやつです。

具体例（VSCodeのRestClient使ってます）

# リクエスト
POST https://postman-echo.com/post
Content-Type: application/json

{
  "title": "test",
  "number": 1
}


# レスポンス
HTTP/1.1 200 OK
Date: Wed, 01 Dec 2021 01:11:09 GMT
Content-Type: application/json; charset=utf-8
Content-Length: 415
Connection: close
ETag: W/"19f-iSoVzdO7x9iG7W7qPnV8qOH+yIU"
Vary: Accept-Encoding
set－cookie: sails.sid=s%3AG-Mn1-jcp1mzHAsetCx3i191RllORw2K.dlAqTsh4Q6wiKpK%2Fv2kAQmLUSbf0Jatql2M5TQUEPoo; Path=/; HttpOnly

{
  "args": {},
  "data": {
    "title": "test",
    "number": 1
  },
  "files": {},
  "form": {},
  "headers": {
    "x-forwarded-proto": "https",
    "x-forwarded-port": "443",
    "host": "postman-echo.com",
    "x-amzn-trace-id": "Root=1-61a6cbad-19be676d0e9c48901e926f42",
    "content-length": "34",
    "user-agent": "vscode-restclient",
    "content-type": "application/json",
    "accept-encoding": "gzip, deflate"
  },
  "json": {
    "title": "test",
    "number": 1
  },
  "url": "https://postman-echo.com/post"
}

※ noteのEditorでは「set-cookie」がエラーとなり記事が保存できない（原因不明）ため、ハイフンを全角にしております。

application/x-www-form-urlencoded

エンコードされたURLのデータフォーマットのことです

application/x-www-form-urlencoded

エンコードされたURLのデータフォーマットのことです。
例えば title=test&number=1 をエンコードしたら、title%3Dtest%26number%3D1となります。

具体例

# リクエスト
POST https://postman-echo.com/post
Content-Type: application/x-www-form-urlencoded

title%3Dtest%26number%3D1


# レスポンス
{
  "args": {},
  "data": "",
  "files": {},
  "form": {
    "title=test&number=1": ""
  },
  "headers": {
    "x-forwarded-proto": "https",
    "x-forwarded-port": "443",
    "host": "postman-echo.com",
    "x-amzn-trace-id": "Root=1-61a6cc1f-7bb7940b24fb76d86a09c9d3",
    "content-length": "25",
    "user-agent": "vscode-restclient",
    "content-type": "application/x-www-form-urlencoded",
    "accept-encoding": "gzip, deflate",
    "cookie": "sails.sid=s%3AG-Mn1-jcp1mzHAsetCx3i191RllORw2K.dlAqTsh4Q6wiKpK%2Fv2kAQmLUSbf0Jatql2M5TQUEPoo"
  },
  "json": {
    "title=test&number=1": ""
  },
  "url": "https://postman-echo.com/post"
}

application/jsonもしくはapplication/x-www-form-urlencodedをHTTPヘッダーに指定することで、どういうデータをPOSTしているかをサーバ側に知らせています。

application/jsonもしくはapplication/x-www-form-urlencodedをHTTPヘッダーに指定することで、どういうデータをPOSTしているかをサーバ側に知らせています。

まとめ

Content-typeとはどういうものかを理解するところから進めると、すんなり理解できる内容だったと思います。
今までほとんどJSONかまれにXMLしか使ってきませんでしたが、application/x-www-form-urlencodedが出てきたことで初めてContent-type、メディアタイプを理解するきっかけになりました。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/