Laravel+Filament+ESP32+React联动登录遇419/CSRF错误，求解决方案

核心配置修正 #

1. 调整.env文件 #

更新以下环境变量，适配多端访问需求：

APP_URL=http://192.168.0.105:8000
FRONTEND_URL=http://localhost:3000
# 包含React前端和Laravel自身域名（Filament管理面板需要识别当前主机的状态请求）
SANCTUM_STATEFUL_DOMAINS=localhost:3000,192.168.0.105:8000
# 设为空适配开发服务器动态主机，或直接指定Laravel的IP地址
SESSION_DOMAIN=

2. 修复CORS配置（config/cors.php） #

同时允许React和Arduino的请求来源，并开启凭证支持：

'allowed_origins' => [
    env('FRONTEND_URL', 'http://localhost:3000'),
    'http://192.168.0.30' // Arduino的静态IP
],
'allowed_headers' => ['*'],
'supports_credentials' => true,

3. 确认Sanctum状态化域名生效 #

config/sanctum.php中的stateful配置已支持读取环境变量，只要.env的SANCTUM_STATEFUL_DOMAINS设置正确，无需额外修改。

React前端请求处理 #

发送登录请求前必须先获取CSRF令牌，确保会话凭证正确传递：

1. 安装js-cookie库用于读取Cookie
2. 登录流程示例：

import Cookies from 'js-cookie';

const login = async (email, password) => {
    // 先获取CSRF Cookie
    await fetch('http://192.168.0.105:8000/sanctum/csrf-cookie', {
        credentials: 'include'
    });

    // 发送登录请求，携带XSRF令牌
    const response = await fetch('http://192.168.0.105:8000/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN')
        },
        credentials: 'include',
        body: JSON.stringify({ email, password })
    });

    return response.json();
};

Arduino请求处理 #

若Arduino发送POST/PUT/DELETE请求，需将其API路径加入CSRF验证例外：
修改app/Http/Middleware/VerifyCsrfToken.php：

protected $except = [
    // 添加Arduino请求的API路径，示例：
    '/api/arduino/*',
];

若追求更高安全性，可给Arduino生成Sanctum令牌，请求时在头部携带Authorization: Bearer {token}。

验证与缓存清理 #

1. 清理Laravel配置缓存：

php artisan config:clear

2. 重启Laravel开发服务器：

php artisan serve --host 192.168.0.105 --port=8000

3. 清空浏览器缓存或使用无痕模式，测试Filament管理面板登录和React前端登录。

内容的提问来源于stack exchange，提问作者Danny