HTTPのリクエストヘッダー、レスポンスヘッダーで利用する「Content-Type」「Content-Disposition」の役割についてとりあげます。フォーム送信のContent-Typeで利用する「application/x-www-form-urlencoded」「multipart/form-data」の使い分けについても紹介します。
Content-Type
リクエストヘッダーで指定するときは、サーバーに送信するデータの種類を指定します。
レスポンスヘッダーで指定するときは、クライアントに返すデータの種類を指定します。
以下、主なContent-Typeです。
| Content-Type | 説明 |
|---|---|
| application/json | JSONファイル |
| application/octet-stream | バイナリファイル |
| application/pdf | PDFファイル |
| application/zip | Zipファイル |
| image/gif | GIFファイル |
| image/jpeg | JPEGファイル |
| image/png | PNGファイル |
| image/svg+xml | SVGファイル |
| text/plain | テキストファイル |
| text/csv | CSVファイル |
| text/html | HTMLファイル |
| text/css | CSSファイル |
| text/javascript | JavaScriptファイル |
| audio/mpeg | MPEG形式の音声または音楽ファイル |
| video/mp4 | (動画データ)MP4ファイル |
| application/x-www-form-urlencoded | HTTPのPOSTメソッド(フォームデータの送信) |
| multipart/form-data | HTTPのPOSTメソッド(ファイルアップロード) |
フォーム送信で使うContent-Type
通常、HTTPのPOSTメソッドでフォームデータを送信するとき application/x-www-form-urlencoded を利用します。
しかし、ファイル送信が必要な場合は、異なるContent-Typeを指定します。
ファイル送信では、1つのフォーム名に対して「ファイル名・種類・内容」と複数の情報を送信する必要があるのですが、application/x-www-form-urlencoded だと1つのフォーム名に対して1つの情報しか送信できません。
ファイル送信が必要になったとき multipart/form-data を利用します。
application/x-www-form-urlencoded
application/x-www-form-urlencoded を利用したとき、以下のようなリクエストになります。
$ curl -v -X POST http://localhost:8000 \
> -d "memo1=aaa" \
> -d "memo2=bbb" \
> -d "memo3=ccc" \
> --trace-ascii /dev/stdout
(省略)
0000: POST / HTTP/1.1
0011: Host: localhost:8000
0027: User-Agent: curl/7.71.1
0040: Accept: */*
004d: Content-Length: 29
0061: Content-Type: application/x-www-form-urlencoded
0092:
=> Send data, 29 bytes (0x1d)
0000: memo1=aaa&memo2=bbb&memo3=ccc
(省略)multipart/form-data
multipart/form-data を利用したとき、以下のようなリクエストになります。
$ cat /tmp/01.txt
hello world
$
$ cat /tmp/02.txt
wakuwaku bank$ curl -v -X POST http://localhost:8000 \
-F "file[1]=@/tmp/01.txt" \
-F "file[2]=@/tmp/02.txt" \
-F "memo=this is memo" \
--trace-ascii /dev/stdout
(省略)
0000: POST / HTTP/1.1
0011: Host: localhost:8000
0027: User-Agent: curl/7.71.1
0040: Accept: */*
004d: Content-Length: 459
0062: Content-Type: multipart/form-data; boundary=--------------------
00a2: ----3f379138e4a79721
00b8:
=> Send data, 292 bytes (0x124)
0000: --------------------------3f379138e4a79721
002c: Content-Disposition: form-data; name="file[1]"; filename="01.txt
006c: "
006f: Content-Type: text/plain
0089:
008b: hello world.
0099: --------------------------3f379138e4a79721
00c5: Content-Disposition: form-data; name="file[2]"; filename="02.txt
0105: "
0108: Content-Type: text/plain
0122:
=> Send data, 167 bytes (0xa7)
0000: wakuwaku bank.
0010: --------------------------3f379138e4a79721
003c: Content-Disposition: form-data; name="memo"
0069:
006b: this is memo
0079: --------------------------3f379138e4a79721--
(省略)Content-Disposition
ブラウザは、レスポンスヘッダーのContent-Typeで指定されたMIMEタイプをもとに挙動を変更します。
image/jpeg などのMIMEタイプである場合、ブラウザは画像をブラウザ上に表示します。
ブラウザ表示ではなく、ダウンロードさせたい場合、Content-Disposition を活用します。
( Content-Disposition: attachmentと指定 )
# ウェブページとして表示可能であることを示す。
Content-Disposition: inline
# ダウンロードすべきであることを示す。
Content-Disposition: attachment
