はじめに

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 パスパラメータ」
検索条件・ページネーション・詳細取得の設計が理解できる回を予定です。