Laravel x React (SPA) で419エラーを解決した方法

Laravel x React (SPA) で419エラーを解決した方法

備忘録として残します。

使用している技術

FE: React/Typescript
BE: Laravel Sail

Breeze apiを使用しています

直面した問題

419 unknown status

"message": "CSRF token mismatch."

やったこと

1. Laravelプロジェクトの.envファイルに下記を追記 (自分の環境に合った設定にしてください)
   .env

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

SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost
SESSION_SECURE_COOKIE=true

2. React側のaxiosの設定
   axios.config.ts

const axiosInstance = axios.create({
  baseURL: "http://localhost",
  withCredentials: true,
  withXSRFToken: true,
  headers: {
    "Access-Control-Allow-Origin": "*",
  },
})

参考にした記事

https://laratech.jp/posts/laravel-419-error/#Laravel プロジェクト外の JS フレームワークの場合