Zenn
✅

HTTPのリクエストとレスポンス

に公開
http
学習記録
idea

はじめに

概要

  • HTTPのリクエストとレスポンス

キーワード

GET, POST, PUT, DELETE, MIME, HTTPリクエスト、
HTTPレスポンス, HTTP認証方式, HTTPステータスコード

学習内容

HTTP

  • HTTP（HyperText Transfer Protocol）は、インターネット上で情報交換のため定めた通信規約（プロトコル）の一つです
  • 一番イメージしやすいシーンは、ブラウザ経由でサイトをログインすることでしょう
  • ユーザがブラウザでログインしたいことと必要なデータをサーバー送って（リクエスト）、そして、サーバから結果をもらいます（レスポンス）

HTTPリクエスト

クライアントがサーバーに対して「何かしてほしい」と要求する通信のことです
GET,POSTなどは通信したい方式を指します

GETの例

GET /login.html?user=alice&pwd=12345 HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9
Accept-Language: ja,en-US;q=0.9
Referer: https://www.example1.com/search?q=http+referer
Connection: keep-alive
Cookie: session_id=abc123xyz; theme=dark
  • GET：メソッド。どのような方法でサーバーに通信を要求します。よく使われるメソッドは以下です
    • GET：リソースを取得したいとき使われます
    • POST：サーバにデータを送信する時使います。PUT,DELETE,GETを代用することも多いです
    • PUT：リソースの更新や作成で使います。API通信で使われる場合が多いです。他の場合はほぼPOSTを使います
    • DELETE：リソースの削除で使います。API通信で使われる場合が多いです。他の場合はほぼPOSTを使います
  • /login.html?user=alice&pwd=12345：リクエストするパス。（クエリパラメータ付き）
  • HTTP/1.1：使用しているHTTPバージョン
  • Cookie：書き方は名前=値のペアが複数並べます。一時データ（セッション情報など）を保存します。
  • Host：ホスト名、HTTP1.1以降は必須です
  • User-Agent:クライアント情報です。多くの場合はOSとブラウザの情報を見ています。当然、クライアント側変更可能です
  • Accept：MIMEタイプというリソースの種類を指定します。クライアントが受け取りたいタイプをサーバーに伝える
    • q：優先度
  • Accept-Language：クライアントが「希望する」言語をサーバーに伝えます
    • 多言語サイトではこのヘッダーを見て、リダイレクトや表示内容を切り替える処理を実装することが多いです
    • q：優先度
  • Referer：クライアントが現在アクセスしようとしているリソースの直前にいたページのURLを示します
    • 「どこから来た」を示す意味です
  • Connection：サーバーとの「接続を一時的に使うのか、それとも継続して使うのか」をサーバーに伝えます
    • keep-alive：接続を維持するよう要求します。HTTP/1.1のデフォルト値
    • HTTP/2で廃止されました

POSTの例

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 29

username=alice&password=secret
  • Content-Length：ボディ部のバイト数
  • username=alice&password=secret：ボディ部、JSON形式もあります

PUTの例

PUT /api/users/123 HTTP/1.1
Host: api.example.com
Content-Type: application/json
Content-Length: 53
Authorization: Bearer abcdef123456

{
  "name": "山田太郎",
  "email": "taro@example.com"
}
  • Authorization：認証方式

DELETEの例

DELETE /api/users/123 HTTP/1.1
Host: api.example.com
Authorization: Bearer abcdef123456

主なMIMEタイプ

  • text/plain：プレーンテキスト
  • text/html：HTMLページ
  • application/xml：XMLデータ
  • text/css：css
  • image/gif,image/png, image/jpg, image/webp：画像
  • application/pdf：PDFファイル
  • multipart/form-data：フォームデータ（ファイル含む）
  • application/javascript：JavaScriptコード
  • application/octet-stream：バイナリファイル（デフォルト）
  • /：任意

認証方式（Authorizationヘッダー）

  • Basic認証：ユーザー名＋パスワードをBase64で送ります
    • Authorization: Basic ...
  • Bearerトークン認証 トークンで認証（OAuth 2.0など）
    • Authorization: Bearer ...
  • ダイジェスト認証：パスワードをハッシュ化（MD5）して送ります
    • Authorization: Digest ...
    • 回は 401 エラーで「挑戦（チャレンジ）」が返り、それに応じてハッシュ値を送る形式です
  • APIキー認証：Authorizationもしくは非標準なカスタム属性(x-api-key)などを使います

HTTPレスポンス

クライアントのリクエストに対して、サーバーから返された内容です

HTTP/1.1 200 OK
Date: Mon, 28 Apr 2025 13:00:00 GMT
Server: nginx/1.18.0
Content-Type: text/html; charset=UTF-8
Content-Length: 145
X-UA-Compatible: IE=Edge
Last-Modified: Mon, 28 Apr 2025 18:00:00 GMT
Connection: close

<!DOCTYPE html>
<html>
<head><title>サンプルページ</title></head>
<body>
<h1>Hello, world!</h1>
<p>これはサンプルのレスポンスです。</p>
</body>
</html>
  • 200：HTTPステータスコード
  • OK：HTTPステータスのテキストフレーズ
  • Date：サーバーの応答日時
  • Server：Webサーバー情報
  • Content-Type：コンテンツの種類(MIMタイプ)
  • Content-Length：ボディ部のバイト数
  • X-UA-Compatible：IEに「どの互換モードで表示するか」を指示するためのヘッダーです
    • IE=Edge：常に最新のIEレンダリングエンジンを使います
    • IE=10 / IE=9：特定バージョンの互換モードを使用します
  • Last-Modified：リソースの最終更新日を示します
  • Connection：接続の制御（多分リクエストと同じ仕様です）
    • close：レスポンス後に接続を切断する
    • keep-alive：接続を維持する（HTTP/1.1のデフォルト値）
    • upgrade：プロトコルを変更する（例：HTTP → WebSocket）
  • <!DOCTYPE html>以下の部分：ボディ部

HTTPステータスコード

サーバーがクライアントのリクエストにどう応じたかを3桁の数字で示すものです

コード詳細

  • 200番台：成功
    • 200 OK：成功
  • 300番台：リダイレクト
    • 304 Not Modified：キャッシュ有効（再取得不要）
  • 400番台：クライアントのエラー
    • 400 Bad Request：無効なリクエスト（構文ミスなど）
    • 401 Unauthorized：認証が必要または失敗
    • 403 Forbidden：アクセス禁止（権限なし）
    • 404 Not Found：URLが存在しない
    • 405 Method Not Allowed：不正なHTTPメソッド
    • 429 Too Many Requests：リクエスト過多
  • 500番台：サーバーのエラー
    • 500 Internal Server Error：サーバー内部エラー
    • 502 Bad Gateway：ゲートウェイが不正な応答を受け取った
    • 503 Service Unavailable：一時的に利用不可
    • 504 Gateway Timeout：ゲートウェイの応答がタイムアウトした
GitHubで編集を提案

Discussion