Vue3+Ionic+Sanctum移动端认证返回419错误排查求助

核心原因 #

移动端请求触发了Laravel的CSRF校验逻辑，桌面端浏览器环境会自动处理CSRF令牌传递，而移动端APP未适配该逻辑，导致返回419错误。

具体排查点及解决方法 #

• 检查请求是否携带Cookie凭证
  Ionic/Vue的HTTP客户端（如axios）默认可能开启withCredentials，导致请求携带Cookie，Laravel Sanctum会将这类请求判定为会话认证请求而非无状态令牌请求，进而要求CSRF令牌。
  解决：请求登录接口时关闭withCredentials，或全局配置中针对API请求禁用该选项：

  // axios示例
  axios.post('/api/token', loginData, {
    withCredentials: false
  })
  

• 验证后端路由中间件配置
  确认登录接口路由使用sanctum:api中间件，而非web中间件。误用web中间件会强制触发CSRF校验：

  // routes/api.php 正确配置
  Route::post('/token', [AuthController::class, 'createToken'])->middleware('auth:sanctum');
  

  注：auth:sanctum用于确保用户完成基础认证（如邮箱密码校验）后再创建令牌，需前置完成账号密码的验证逻辑。

• 检查Sanctum的无状态API配置
  确保config/sanctum.php中stateful数组未包含移动端访问的Expose域名，避免Sanctum将请求识别为会话认证请求：

  // config/sanctum.php
  '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) : ''
  ))),
  

  移动端APP的请求属于无状态API请求，不应被纳入stateful列表。

• 确认请求头设置
  移动端请求需设置Accept: application/json头，让Laravel明确这是API请求，避免触发web端的CSRF校验逻辑：

  axios.post('/api/token', loginData, {
    headers: {
      'Accept': 'application/json'
    }
  })
  

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