Laravel 11 Sanctum对接React登录报419错误及权限问题排查

1. 统一主机地址 #

Laravel使用127.0.0.1:8000、React使用localhost:3000会被浏览器判定为不同域名，导致Cookie无法正常共享。

• 启动Laravel时指定主机为localhost：php artisan serve --host=localhost
• React保持localhost:3000运行，确保两者主机一致。

2. 修正CSRF Cookie获取逻辑 #

React发起登录请求前必须先调用/sanctum/csrf-cookie，且请求需携带withCredentials: true才能存储Cookie。示例代码：

import axios from 'axios';

// 全局配置axios携带凭证
axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'http://localhost:8000';

const handleLogin = async (email, password) => {
  // 先获取CSRF Cookie
  await axios.get('/sanctum/csrf-cookie');
  
  // 发送登录请求
  const res = await axios.post('/api/login', { email, password });
  return res.data;
};

3. 验证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) : ''
))),

同时在.env文件中补充：

SANCTUM_STATEFUL_DOMAINS=localhost:3000
SESSION_DOMAIN=localhost

4. 完善CORS配置 #

config/cors.php需开启凭证支持并指定正确来源：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000'],
    'allowed_headers' => ['*'],
    'supports_credentials' => true, // 必须设为true
    // 其他配置保持默认
];

5. 处理页面刷新401问题 #

页面刷新时，浏览器会重置请求上下文，需通过请求拦截器处理失效的认证状态：

axios.interceptors.response.use(
  res => res,
  async err => {
    if (err.response.status === 401) {
      // 重新获取CSRF Cookie并重发请求
      await axios.get('/sanctum/csrf-cookie');
      return axios(err.config);
    }
    return Promise.reject(err);
  }
);

6. 清除配置缓存 #

修改配置后执行以下命令生效：

php artisan config:clear
php artisan cache:clear

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