Content-Type, Content-Dispositionの役割

HTTPのリクエストヘッダー、レスポンスヘッダーで利用する「Content-Type」「Content-Disposition」の役割についてとりあげます。フォーム送信のContent-Typeで利用する「application/x-www-form-urlencoded」「multipart/form-data」の使い分けについても紹介します。

目次

Content-Type

リクエストヘッダーで指定するときは、サーバーに送信するデータの種類を指定します。
レスポンスヘッダーで指定するときは、クライアントに返すデータの種類を指定します。

以下、主なContent-Typeです。

Content-Type説明
application/jsonJSONファイル
application/octet-streamバイナリファイル
application/pdfPDFファイル
application/zipZipファイル
image/gifGIFファイル
image/jpegJPEGファイル
image/pngPNGファイル
image/svg+xmlSVGファイル
text/plainテキストファイル
text/csvCSVファイル
text/htmlHTMLファイル
text/cssCSSファイル
text/javascriptJavaScriptファイル
audio/mpegMPEG形式の音声または音楽ファイル
video/mp4(動画データ)MP4ファイル
application/x-www-form-urlencodedHTTPのPOSTメソッド(フォームデータの送信)
multipart/form-dataHTTPの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

参考

よかったらシェアしてね!
目次