Laravel Sanctum+Nuxt3使用IP访问时Bearer Token未携带问题求助

环境信息 #

• Laravel 11.29.0：http://192.168.10.11:8000
• Nuxt 3.13.2：http://192.168.10.11:3000
• 认证模块：nuxt-auth-sanctum

问题描述 #

用http://localhost:3000访问前端时，认证功能正常，请求/api/user时请求头携带authorization: Bearer ...；改用http://192.168.10.11:3000访问时，该请求头缺失，后端返回{"message":"Unauthenticated."}。登录请求可正常完成，但后续接口请求未自动携带Token。

当前配置 #

Nuxt sanctum配置（nuxt.config.ts） #

sanctum: {
  mode: 'token',
  baseUrl: 'http://192.168.10.11:8000',
  origin: 'http://192.168.10.11:3000',
  endpoints: {
    login: '/api/login',
    logout: '/api/logout',
  },
  redirect: {
    onAuthOnly: '/login',
    onGuestOnly: '/pegawai'
  },
  globalMiddleware: {
    enabled: true,
  },
}

Laravel CORS配置 #

// config/cors.php
'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],

// .env
FRONTEND_URL=http://192.168.10.11:3000

解决方案步骤 #

1. 确认配置生效并重启服务 #

确保nuxt.config.ts中的sanctum.origin与实际访问地址完全一致（包含http://、IP、端口），之后重启Nuxt开发服务器，避免配置缓存导致的不生效问题。

2. 调整Laravel Sanctum的Stateful域名配置 #

修改config/sanctum.php中的stateful配置，将前端IP地址加入白名单：

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    '%s%s',
    'http://192.168.10.11:3000,http://localhost:3000',
    env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
))),

在.env中添加对应配置：

SANCTUM_STATEFUL_DOMAINS=http://192.168.10.11:3000,http://localhost:3000

执行配置清理命令：

php artisan config:clear

3. 验证Token存储与手动注入请求头 #

登录后打开浏览器开发者工具，检查LocalStorage中是否存在nuxt-auth-sanctum-token（或类似命名）的Token条目：

• 如果不存在：说明登录时Token未成功存储，检查登录接口返回是否包含token字段，或模块是否正确解析返回值
• 如果存在：尝试在请求时手动携带Token，验证是否能正常访问接口：

  const auth = useSanctumAuth()
  const { data: user } = await useFetch('/api/user', {
    baseURL: 'http://192.168.10.11:8000',
    headers: {
      Authorization: `Bearer ${auth.token.value}`
    }
  })
  

  若手动注入有效，说明模块的自动请求头注入逻辑存在问题，需检查版本兼容性。

4. 更新nuxt-auth-sanctum模块 #

当前Nuxt版本为3.13.2，可能存在模块版本不兼容问题，执行更新命令：

npm update nuxt-auth-sanctum

更新完成后重启Nuxt服务，再次测试。

5. 完善Laravel CORS配置 #

确保CORS配置允许所有必要的请求头和凭证传递：

// config/cors.php
return [
    '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,
];

设置supports_credentials: true以确保跨域请求中凭证（如Token相关存储）能正常传递。

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