Nuxt.js对接Laravel API遭遇CSRF令牌不匹配问题求助

我用Nuxt.js做前端、Laravel做API搭建登录页面，获取Sanctum Cookie里的CSRF令牌后，调用登录接口时出现“CSRF token mismatch”错误，相关配置及代码如下：

Laravel 配置信息 #

APP_URL=http://localhost:8080
FRONTEND_URL=http://localhost:3000
SANCTUM_STATEFUL_DOMAINS=http://localhost:8000,localhost:3000,localhost:8000,http://localhost:3000

注：8080为Laravel端口，3000为Nuxt端口

Nuxt端请求代码 #

// calls from nuxt
async function validate() {

  await axios.get('http://localhost:8080/sanctum/csrf-cookie', {
    withCredentials: true
  });

  const token = useCookie('XSRF-TOKEN');

  await axios.post('http://localhost:8080/login', {
    'email': 'email@example.com',
    'password': '1234567890'
  }, {
    headers: {
      'X-XSRF-TOKEN': token.value as string
    }
  })
}

Laravel的cors.php配置 #

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,

解决步骤： #

1. 修正SANCTUM_STATEFUL_DOMAINS配置
   SANCTUM_STATEFUL_DOMAINS只需填写前端的域名端口，无需重复或无关地址。修改.env中的配置：

   SANCTUM_STATEFUL_DOMAINS=localhost:3000
   

   （注：无需带http协议，官方文档支持直接填写域名+端口）

2. POST请求添加withCredentials
   后端验证CSRF令牌需要同时读取请求头的X-XSRF-TOKEN和Cookie中的XSRF-TOKEN，因此POST请求必须携带Cookie。在axios的POST配置中添加withCredentials: true：

   async function validate() {
     await axios.get('http://localhost:8080/sanctum/csrf-cookie', {
       withCredentials: true
     });
   
     const token = useCookie('XSRF-TOKEN');
   
     await axios.post('http://localhost:8080/login', {
       email: 'email@example.com',
       password: '1234567890'
     }, {
       withCredentials: true, // 新增此行
       headers: {
         'X-XSRF-TOKEN': token.value as string
       }
     })
   }
   

3. 更新CORS配置的paths
   当前cors配置的paths未包含/login接口，导致跨域请求被拦截。修改config/cors.php中的paths：

   'paths' => ['api/*', 'sanctum/csrf-cookie', '/login'],
   

   （开发环境也可直接设为['*']，生产环境建议按需添加）

4. 检查SESSION_DOMAIN配置
   若.env中设置了SESSION_DOMAIN，需确保它允许前端域名共享Cookie：

   • 可设为.localhost（适配所有localhost端口）
   • 或留空（默认自动适配当前域名）
     避免设为localhost:8080，否则前端localhost:3000无法获取Cookie。

5. 清除缓存并重启服务
   手动清除浏览器中localhost相关的Cookie，然后重启Laravel和Nuxt服务，再测试登录接口。

内容的提问来源于stack exchange，提问作者Vlăduț Teodor