概要
React + LaravelにBreezeを導入した時に、CSRF対策関連でエラーが発生したので、備忘録として残します。
技術スタック
- フロント
React18 - サーバー
Laravel 9.52.16
フロント、サーバーのリポジトリは別々に作成しています。
BreezeをAPIモードで実装する
今回は、フロントとサーバーを別々で開発しているため、bladeを使用しませんでした。そのため、サーバー側はAPIとして開発を進めました。
公式ドキュメントを参考に実装を行いました。
1. Laravel Breezeのインストール
Composerを使用して、Laravel Breezeをインストールします。
composer require laravel/breeze --dev
2. BreezeをAPIモードで導入する
次に、BreezeをAPIモードでLaravelプロジェクトに導入します。その後、マイグレートをしてUserテーブルを作成します。
php artisan breeze:install api
php artisan migrate
3. インストール後、環境変数を設定する
.envファイル内にFRONTEND_URLが新たに追加されているので、React側のURLを設定します。
また、APP_URLにLaravel側のURLをセットします。デフォルトではhttp://localhost:8000となっているはずです。
.env
APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000
4. CSRF対策用の環境変数を追加
この、手順が公式ドキュメントに記載されていなかったため、React側からエンドポイントを叩いた際にエラーが発生し、解消に1時間かかりました...
Breeze導入前は、問題なく使用できていたエンドポイントが419エラーを吐いてしまい、機能しなくなってしまいました。
下記の環境変数を追加することで導入前と同様にエンドポイントが機能するようになりました。
SANCTUM_STATEFUL_DOMAINS=localhost
下記、記事を参考にして解決できました