Laravel+React登录表单切换SESSION_DRIVER为database时遇419 CSRF令牌不匹配错误

问题背景 #

已完成React登录表单与Laravel后端对接，原有配置及逻辑：

• cors.php中设置'support_credentials' => true
• 原SESSION_DRIVER为file，登录功能正常
• React端Login.jsx提交逻辑：先请求sanctum cookie，再在POST请求头携带X-XSRF-TOKEN

切换SESSION_DRIVER为database后，出现**419 'CSRF令牌不匹配'**错误，以下是针对性解决步骤：

解决步骤 #

1. 生成Session数据表 #

切换到database驱动后，必须创建对应的数据表来存储session数据，运行以下Artisan命令：

php artisan session:table
php artisan migrate

这是核心步骤，缺失数据表会导致session无法正常存储，进而引发CSRF令牌关联失效。

2. 清除缓存与残留数据 #

• 清除Laravel配置缓存：

php artisan config:clear

• 清除路由缓存（若存在）：

php artisan route:clear

• 删除旧的file session文件（避免残留干扰）：

rm -rf storage/framework/sessions/*

• 清除浏览器缓存及Cookie，确保旧的session或令牌被完全清除。

3. 验证Session配置正确性 #

检查config/session.php关键配置项：

'driver' => env('SESSION_DRIVER', 'database'), // 确认驱动为database
'domain' => env('SESSION_DOMAIN', null), // 跨域场景需设置正确域名（如`.yourdomain.com`）
'secure' => env('SESSION_SECURE_COOKIE', false), // 前端为HTTPS时设为true
'same_site' => env('SESSION_SAME_SITE', 'lax'), // 跨域建议设为'lax'或'none'（设为none需开启secure）

4. 确认Sanctum可信来源配置 #

检查config/sanctum.php中的stateful配置，确保React前端域名在列表内：

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    '%s%s',
    'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
    env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
))),

例如前端运行在localhost:3000，需确保该域名被包含。

5. 检查React端Axios配置 #

确保Axios开启withCredentials并正确处理XSRF令牌：

import axios from 'axios';

const instance = axios.create({
    baseURL: 'http://your-laravel-api-url',
    withCredentials: true // 必须开启，保证Cookie被携带
});

// 请求拦截器自动注入XSRF-TOKEN
instance.interceptors.request.use(config => {
    const token = document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1];
    if (token) {
        config.headers['X-XSRF-TOKEN'] = decodeURIComponent(token); // 解码Cookie中的URL编码值
    }
    return config;
});

export default instance;

6. 验证CORS配置有效性 #

再次确认config/cors.php配置：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'], // 必须包含sanctum路径
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://your-react-frontend-url'], // 生产环境避免用['*']
    'allowed_headers' => ['*'],
    'supports_credentials' => true, // 保持为true
];

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