概要

React + LaravelにBreezeを導入した時に、CSRF対策関連でエラーが発生したので、備忘録として残します。

技術スタック

フロント、サーバーのリポジトリは別々に作成しています。

今回は、フロントとサーバーを別々で開発しているため、bladeを使用しませんでした。そのため、サーバー側はAPIとして開発を進めました。

公式ドキュメントを参考に実装を行いました。

Composerを使用して、Laravel Breezeをインストールします。

composer require laravel/breeze --dev

次に、BreezeをAPIモードでLaravelプロジェクトに導入します。その後、マイグレートをしてUserテーブルを作成します。

php artisan breeze:install api

php artisan migrate

.envファイル内にFRONTEND_URLが新たに追加されているので、React側のURLを設定します。
また、APP_URLにLaravel側のURLをセットします。デフォルトではhttp://localhost:8000となっているはずです。

.env

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

この、手順が公式ドキュメントに記載されていなかったため、React側からエンドポイントを叩いた際にエラーが発生し、解消に1時間かかりました...
Breeze導入前は、問題なく使用できていたエンドポイントが419エラーを吐いてしまい、機能しなくなってしまいました。

下記の環境変数を追加することで導入前と同様にエンドポイントが機能するようになりました。

SANCTUM_STATEFUL_DOMAINS=localhost

下記、記事を参考にして解決できました