女性向けエンジニアスクール
3秒でわかる
HTTP のボディが何の形式なのかを受け手に伝えるヘッダ。これが違うと JSON が文字列扱いされたり日本語が化けたりします。
30秒図解
もう少し詳しく
どういうものか
HTTP のリクエストやレスポンスに付くヘッダのひとつで、ボディに入っているデータが何の形式なのかを相手に伝えます。値は MIME タイプと呼ばれる形式名で、HTML なら text/html、API の JSON なら application/json、画像なら image/png といった具合です。後ろに charset=UTF-8 のように文字コードを添えることもできます。
なぜ必要か
ネットワークを流れてくるのは、ただのバイト列です。受け取った側はそれを HTML として描画するのか、JSON としてパースするのか、ファイルとして保存するのかを自力では判断できません。Content-Type はその判断材料そのものです。日本語のページが文字化けする典型的な原因も、charset の指定漏れでブラウザが別の文字コードだと推測してしまうことにあります。
具体例
$ curl -i https://example.com/api/users
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Content-Length: 52
[{"id":1,"name":"tanaka"},{"id":2,"name":"suzuki"}]送る側でも同じヘッダを付けます。
await fetch("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "tanaka" }),
});つまずきやすいところ
似た用語との違い
| ヘッダ | 向き | 意味 |
|---|---|---|
| Content-Type | 送る側が付ける | 今送っている本文の形式 |
| Accept | リクエストで付ける | 返してほしい形式の希望 |
| Content-Disposition | レスポンスで付ける | 画面に表示するかダウンロードさせるか |
