⚙️ この記事は AI（ChatGPT）による自動生成および編集支援のもとで作成されています。
内容はできる限り正確に記述していますが、参考情報としてご覧ください。
使用ツール：ChatGPT（OpenAI / GPT-5 モデル）

学習日報アプリを Laravel（API）× Next.js（フロント） で作っているときに、

/login は通るのに /me が 401

Cookie を送ってるつもりなのにサーバー側で見えない

CORS の preflight で死ぬ

という CORS / Cookie / リバースプロキシ地獄 にどっぷりハマりました。

最終的には、

CORS 設定を整理し直しつつ
Next.js の API ルートで「リバースプロキシ」を作り
HttpOnly Cookie のやり取りをそこで完結させる

という形で落ち着いたので、その過程をメモしておきます。

環境

ローカル開発環境はこんな構成です。

フロント: http://localhost:3000（Next.js）
バックエンド: http://localhost:8080（Laravel API）
認証: Laravel Sanctum + アクセストークン / リフレッシュトークン方式
フロントからは Axios で http://localhost:8080/api/v1/* を叩く

ポートもドメインも違うので、100% CORS と Cookie が絡む構成です。

症状1: `/login` は通るのに `/me` が 401

最初に遭遇したのはこれでした。

POST /api/v1/login は 200
GET /api/v1/me を叩くと 401 Unauthorized

Network タブを見ると、リクエストヘッダにはちゃんと

Authorization: Bearer <access_token>

が付いている。なのに Sanctum 側で認証されない。

原因

config/auth.php の guards.api が sanctum になっていなかった
auth:sanctum ミドルウェアが web ガード前提みたいな形で動いていた

対策

config/auth.php をしっかり設定：

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],

    'api' => [
        'driver' => 'sanctum', // ここがポイント
        'provider' => 'users',
    ],
],

ルーティング側で auth:sanctum を使えば OK。

次に詰まったのが リフレッシュトークンの Cookie です。

login のレスポンスで Set-Cookie: refresh_token=...; HttpOnly を返している
ブラウザの Application タブを見ると、ちゃんと Cookie が保存されている
なのに POST /api/v1/refresh を叩いても、サーバー側で request()->cookie('refresh_token') が null

フロント側

Axios の設定はこんな感じでした。

const apiClient = axios.create({
  baseURL: "http://localhost:8080/api/v1",
  withCredentials: true, // ← これは付けている
});

原因

CORS 設定の不足です。

サーバー側が Access-Control-Allow-Credentials: true を返していない
Access-Control-Allow-Origin が * になっている

と、ブラウザは Cookie を送ってくれません。

Laravel 側の CORS 設定

config/cors.php を確認＆修正します。

return [

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => [
        'http://localhost:3000', // フロントのURLを明示
    ],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true, // ← ここ重要
];

allowed_origins を * ではなくフロントの URL に限定
supports_credentials を true にする

これで withCredentials: true なリクエストでも Cookie が飛ぶようになりました。

症状3: Preflight（OPTIONS）でエラーになる

POST /login や POST /refresh を叩くと、たまに

先に飛んでいる OPTIONS リクエストが 4xx
その後の本体の POST が送られない

みたいな状態になることもありました。

対策

CORS ミドルウェアの適用順序を確認
paths に api/* を含める
allowed_methods を ['*'] にして雑に許可する

などを行うことで、ひとまず 「OPTIONS で死ぬ問題」 は解消。

最終形: Next.js の API ルートで「リバースプロキシ」を立てる

CORS 設定を頑張っても、

ローカル / 本番でドメインが変わるたびに設定が煩雑
HttpOnly Cookie を扱う処理がフロントから見えにくい
ブラウザから直接 http://localhost:8080 に飛ばしているのがなんか気持ち悪い

…というモヤモヤがあったので、最終的に Next.js 側に API ルートを立てて、そこから Laravel を叩く構成にしました。

/api/refresh の例

// app/api/refresh/route.ts
import { NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function POST() {
  try {
    const cookieStore = cookies();

    // "name=value; name2=value2" 形式にして Laravel に渡す
    const cookieHeader = cookieStore
      .getAll()
      .map((c) => `${c.name}=${c.value}`)
      .join("; ");

    const backendResponse = await fetch("http://localhost:8080/api/v1/refresh", {
      method: "POST",
      headers: {
        Cookie: cookieHeader,
      },
      credentials: "include",
    });

    const data = await backendResponse.json();

    return NextResponse.json(data, {
      status: backendResponse.status,
    });
  } catch (error) {
    console.error("Refresh API error:", error);
    return NextResponse.json(
      { status: "error", message: "refresh failed" },
      { status: 500 },
    );
  }
}

何が嬉しいか

ブラウザから見ると same-origin（/api/refresh）にアクセスするだけでよくなる
Cookie の取得は Next.js のサーバー側で完結し、JS からは触れない
Laravel 側から見れば「普通のサーバー間リクエスト」に見える

結果として、

ブラウザ ↔ Next.js 間では CORS を気にしなくてよくなり
Next.js ↔ Laravel 間ではサーバー同士なので素直に Cookie / ヘッダをやり取りできる

という構成になりました。

デバッグで役立ったログ

CORS / Cookie 周りは 「ブラウザの気持ち」を読むゲーム なので、いくつかログのポイントを決めておくと楽です。

Network タブで
- Request Headers の Origin
- Response Headers の Access-Control-*
- Cookie が付いているか
Laravel 側で
- \Log::info('cookies', request()->cookies->all());
- \Log::info('auth user', [ 'id' => optional(auth()->user())->id ]);
Next.js 側で
- /api/refresh の cookieHeader を console.log する
- Axios のインターセプターで 401 / 403 をログ

「どこの時点で Cookie が消えているのか」を一歩ずつトレースすると、だいたい原因に辿り着けました。

まとめ

Laravel × Next.js の構成でハマりがちだったポイントはざっくりこんな感じでした。

auth.php の guards.api を sanctum にし忘れて /me が 401
CORS 設定の allowed_origins と supports_credentials が噛み合っておらず Cookie が飛ばない
Preflight（OPTIONS）でエラーになり、本体リクエストが送られない
最終的には Next.js の API ルートでリバースプロキシを立てて、Cookie をサーバー側で中継する設計に落ち着いた

同じように

「/login は通るのに /me が 401 なんだが？？？」

という状態に陥っている人の、ヒントになれば幸いです。
この記事と併せて、アクセストークン / リフレッシュトークンの実装記事も読んでもらえると、認証周りの全体像 が見えてくると思います 🔐

Discussion