Zenn
🐡

💻 HTTPリクエストにおけるHeaderとBodyの世界 〜ギャルエンジニア編〜

に公開
基礎
httpリクエスト
tech

🎯 1. RequestHeaderとBodyの仕組みを知りたい

🌐 HTTPリクエストの構造

HTTPリクエストは、クライアントがサーバーに「データくれ！受け取ってくれ！」と送るメッセージ💌
主に以下の2部構成からなる：

1. Request Header（リクエストヘッダー）

  • サーバーへの指示書📄
  • Content-TypeやAuthorization、Hostなどが含まれる

2. Request Body（リクエストボディ）

  • 実際に送りたいデータ🎁
  • フォームの値やJSON、ファイル送信など！

📊 2. 実際のリクエストのログってどんな感じ？

POST /api/v1/login HTTP/1.1
Host: example.com
Content-Type: application/json
Authorization: Bearer abcdefg12345
User-Agent: curl/7.79.1
Accept: */*
Content-Length: 45

{
  "email": "gal_engineer@shibuya.jp",
  "password": "pa$$w0rd"
}

ポイント：

  • ヘッダーで「形式・認証」などを指示
  • ボディに「実データ」が含まれる
  • パスワードやトークンなど、センシティブ情報はログ出力注意⚠️

🤔 3. HeaderとBodyの処理のされ方の違い

項目 Header Body
処理順序 一番最初に読まれる HeaderがOKなら次に読む
用途 情報の定義・処理ルール・認証 実際のデータ本体
主な役割 サーバーへの使用ガイド 本命の中身❤️（JSONなど）

🤝 4. Header + Body の全体構造ってなんて呼ぶ？

→ HTTPメッセージ（HTTP Request/Response Message）

構成：

[Header]
（空行）
[Body]

🛠 5. Headerをカスタマイズすることはできる？

YES！できるっちゃよ💯✨

📌 カスタム例：

  • X-App-Version: 1.0.0
  • X-Gal-Token: bishoujoMagic123

📌 サーバー側（Rails例）：

request.headers["X-App-Version"]  # => "1.0.0"

⚠️注意：

  • CORS対応必要（Access-Control-Allow-Headers指定）
  • セキュリティ意識大事（パスワードは入れんな！）

🤗 6. HeaderはBodyの補助という理解でいい？

💡正解‼️ 基本的には「補助」で、でも「超大事なナビゲーター」的存在✨

  • Headerの中身（Content-Typeなど）によってBodyの解析方法が決まる
  • Headerだけで処理が終わる場合もある（例：GET、認証系）

🧠 7. X- 以外にヘッダー命名の慣習ある？

慣習/ルール 内容
X-プレフィックス 昔は必須だったが今は非推奨（RFC 6648）
命名工夫 アプリ名やドメイン名使ってぶつかり回避
小文字・大文字 区別されないが、見た目整えて✨
CORS対応 カスタムヘッダーはプリフライト対象🙈

🛫 8. プリフライトってなに？

ブラウザがリクエスト送る前に、事前にサーバーに「このリクエスト送っていいっすか？」って確認するやつ🧐

  • メソッドが PUT, DELETE, PATCH などの場合
  • カスタムヘッダー付き、変なContent-Typeついてると発動🔥
  • 実体は OPTIONS メソッドによる確認リクエスト！

🌐 9. プリフライトを行うのはブラウザなの？

👍YES！プリフライトを行うのは完全に「ブラウザ」です！

  • fetch や axios 使ってると自動発生（JS側では制御不可⚠️）
  • curl や Postman、Ruby/Go などのサーバーサイドからのHTTP通信では発生しない！

🎉 Special Thanks 🎉

👱‍♂️ ギャルエンジニアからのメッセージ💘：

Headerはただの前座じゃねえ
本気のBodyを届けるための最強のアシスト🔥
どんなデータも、まずは気持ちよく受け取ってもらえるように、
イケてるHeaderを添えるのがマナーっしょ😎💅✨

ヘイヘイヘーーーイ‼️🌈💥
HTTPリクエストマスター目指してるそこのアナタ〜🔥🧠
今までの知識がガチで染み込んでるか超チェックしてこう💅✨
**ギャルエンジニア特製プリプリ☆HTTPクイズ10問！**いっくよ〜〜〜✌️💖

💻 HTTPリクエスト 最強クイズ（全10問）

❓ Q1. HTTPリクエストに必ず含まれる2大構成要素といえば？

A. CookieとToken
B. HeaderとBody
C. GETとPOST
D. URLとJSON

❓ Q2. HTTPヘッダーの「Content-Type」が意味するのはなに？

A. リクエストのサイズ
B. ヘッダーの種類
C. ボディのデータ形式
D. リクエストの発行元アプリ名

❓ Q3. サーバーがリクエストを受け取ったとき、最初に読むのはどこ？

A. Body
B. IPアドレス
C. Header
D. URLクエリパラメータ

❓ Q4. ヘッダーが不正や不足だった場合、サーバーはどうする？

A. 修正してくれる
B. Bodyだけ先に処理する
C. エラーを返す（例：400、401）
D. 無視して進む

❓ Q5. リクエストのBodyでよく使われるフォーマットに含まれないのは？

A. application/json
B. multipart/form-data
C. text/html
D. audio/wav

❓ Q6. ヘッダーにカスタム情報を追加したい場合、代表的な書き方は？

A. Authorization-Token
B. X-App-Version
C. Body-Format-Type
D. Set-Data-Custom

❓ Q7. CORSで、安全確認のためにブラウザが最初に送るリクエストをなんという？

A. Check-Request
B. Safety-Header
C. Preflight（プリフライト）
D. Headers-Only-Mode

❓ Q8. プリフライトリクエストのHTTPメソッドはどれ？

A. GET
B. OPTIONS
C. HEAD
D. POST

❓ Q9. プリフライトリクエストを送るのは誰？

A. サーバーサイドエンジン
B. Nginx
C. ブラウザ
D. クライアントのJavaコード

❓ Q10. HTTPヘッダーのカスタム命名における最近の慣習に近いものは？

A. "X-" を絶対使う
B. 全大文字で書く
C. プレーンな名前に自社名/サービス名を含める
D. 日本語もOK

✅ 回答チェック💡
問題 正解
Q1 B
Q2 C
Q3 C
Q4 C
Q5 D
Q6 B
Q7 C
Q8 B
Q9 C
Q10 C

🎉 結果でチャラ度チェック🕶️💥

正解数 チャラ度
9〜10問 ギャルプロエンジニア🌈 完全に理解してる！次は設計フェーズへGO！
7〜8問 ギャル見習い🔥 めっちゃいい線いってる！あとちょい！
4〜6問 シャバいオタギャル🌀 基礎はできてる！定着目指そ！
0〜3問 ガチ勉強はじめギャル🌱 全然OK！これからが伸びしろよ💪😘

もっと難しい実装寄りクイズや、Rails特化編とかも作るから、
「別バージョン希望ッス✨」とかあれば、いつでも言ってネ〜🫶🔥ギャル魂で仕上げるYO💅🌟

Discussion