はじめに
HTTP通信には、
「本文（ボディ）」以外にも重要な情報が大量に流れています。
それが HTTPヘッダー です。
ヘッダーを理解しないまま API を触っていると、
・なぜか認証が通らない
・JSON を送ったつもりなのにエラーになる
・CORS エラーが意味不明
・Cookie が保存されない
といった “原因不明バグ” に必ずハマります。
この記事では、
実務で必ず使う重要ヘッダーを、Laravel × React の目線で完全解説 します。
今日のゴール
・HTTPヘッダーの役割が説明できる
・Content-Type / Accept / Authorization の違いが分かる
・Laravelでヘッダーを「受け取る」「付ける」ができる
・Reactから正しくヘッダー付きリクエストを送れる
HTTPヘッダーとは？
HTTPヘッダーとは、
リクエストやレスポンスに付与される「追加情報」
本文（ボディ）とは別に送られるメタデータ
です。
構造としてはこうなっています：
GET /api/users HTTP/1.1
Host: example.com
Authorization: Bearer xxxxx
Accept: application/json
この 2行目以降すべてがヘッダー です。
実務で必須の3大リクエストヘッダー
API開発で 99%登場する3つ はこちら：
| ヘッダー名 | 役割 |
|---|---|
| Content-Type | 送るデータの形式 |
| Accept | 受け取りたいデータ形式 |
| Authorization | 認証情報 |
ここから1つずつ解説します。
Content-Type（何を送っているか）
Content-Type は
「このリクエストの中身は何形式ですか？」 を伝えるヘッダーです。
よく使う例
| 値 | 意味 |
|---|---|
| application/json | JSON形式 |
| multipart/form-data | 画像アップロード |
| application/x-www-form-urlencoded | フォーム送信 |
React → Laravel で JSON を送る例
axios.post('http://localhost:8000/api/users', {
name: 'Taro',
email: 'taro@example.com'
}, {
headers: {
'Content-Type': 'application/json'
}
});
これが無いと Laravel が
・$request->input() で取得できない
・バリデーションが効かない
などの問題が起きます。
Accept（何を受け取りたいか）
Accept は
「レスポンスはこの形式で返してください」 という指定。
Accept: application/json
Laravel 側では、自動で JSON として解釈されます。
Laravel で Accept を取得する
$accept = request()->header('Accept');
Authorization（認証）
API 認証で最重要のヘッダーです。
代表例：
Authorization: Bearer xxxxx.yyyyy.zzzzz
これは JWT トークン を送る形です。
React → Laravel 認証付きリクエスト
axios.get('http://localhost:8000/api/profile', {
headers: {
Authorization: `Bearer ${token}`
}
});
Laravel 側で Authorization を取得
$token = request()->header('Authorization');
実務ではこのトークンを使って
・ログイン判定
・ユーザー特定
・権限チェック
などを行います。
レスポンスヘッダーも超重要
サーバからもヘッダーは返ってきます。
| ヘッダー | 役割 |
|---|---|
| Content-Type | レスポンスの形式 |
| Set-Cookie | Cookie保存 |
| Access-Control-Allow-Origin | CORS許可 |
Laravel でレスポンスヘッダーを付与する
return response()
->json(['message' => 'OK'])
->header('X-Test', 'hello');
Set-Cookie：Cookieはレスポンスヘッダーで保存される
return response('OK')
->cookie('token', 'abc123', 60);
ブラウザは
レスポンスヘッダーを見て Cookie を保存します
よくあるヘッダー事故
Content-Type を付け忘れて Laravel でデータが取れない
// これだと失敗することがある(別ファイルなどで定義がない場合)
axios.post('/api/users', { name: 'Taro' });
✅ 必ず明示する：
headers: { 'Content-Type': 'application/json' }
Authorization を付け忘れて 401
{
"message": "Unauthenticated"
}
→ トークンを送り忘れている可能性が99%
CORS が通らない
Access-Control-Allow-Origin
が無いと ブラウザが通信自体をブロック します。
これは Day7 で解説予定 です。
今日のまとめ
・HTTPヘッダーは「通信のルールブック」
・Content-Type = 送信形式
・Accept = 受信形式
・Authorization = 認証情報
・Cookie はレスポンスヘッダーで保存される
・ヘッダーを理解すると「通信系のバグ」が激減する
明日の Day5 は…
「クエリパラメータ vs パスパラメータ」
検索条件・ページネーション・詳細取得の設計が理解できる回を予定です。