Nuxt auth v5搭配Laravel Sanctum时自定义axios请求CSRF token不匹配问题

Laravel Sanctum要求所有状态化请求（包括未登录状态下的POST/PUT/DELETE等请求）都需要先获取CSRF Cookie再发起请求。Nuxt Auth模块的laravel/sanctum策略只会在调用登录、获取用户信息等内置方法时自动触发CSRF Cookie的获取逻辑，你自定义的账号创建请求没有走该逻辑，因此没有携带正确的CSRF令牌，导致报错。

• 第一步：修改账号创建方法，发起注册请求前先手动请求CSRF Cookie
  若你没有修改Laravel Sanctum的默认路由，直接修改代码如下即可：

  // 改为异步方法
  async createAccount () {
    this.feedback.isShown = false
    this.isCreatingAccount = true
  
    if (this.apiAccountCreationSource) this.apiAccountCreationSource.cancel('aborted')
    const CancelToken = this.$axios.CancelToken
    this.apiAccountCreationSource = CancelToken.source()
  
    try {
      // 新增：先请求获取CSRF Cookie
      await this.$axios.get('/sanctum/csrf-cookie')
      // 再发起注册请求
      const res = await this.$axios.post(`${this.$config.apiUrl}/api/account`, this.account, {
        cancelToken: this.apiAccountCreationSource.token,
        timeout: 30 * 1000
      })
      this.apiAccountCreationSource = null
      this.setContextualResponse(res)
      setTimeout(() => {
        this.login()
      }, 250)
    } catch (err) {
      this.setContextualResponse(err.response ? err.response.data : null)
    } finally {
      this.isCreatingAccount = false
    }
  }
  

• 第二步：确认Laravel后端配置正确
  请逐一核对以下配置项：

  1. config/cors.php 中 supports_credentials 必须设置为 true，paths 需包含 sanctum/csrf-cookie、api/* 等你用到的路由
  2. config/sanctum.php 中 stateful 配置项（对应.env文件的SANCTUM_STATEFUL_DOMAINS）需填写你的Nuxt前端访问域名（不需要加http/https前缀，端口非80/443需要带上端口，例如localhost:3000）
  3. 若前后端使用同根域不同子域，需要在.env中配置SESSION_DOMAIN为根域，例如.example.com

• 第三步：确认现有Nuxt配置正确
  你当前的axios配置已经开启了credentials: true，该配置无需修改，作用是允许axios跨域请求携带Cookie。

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