Laravel与Vue.js项目调用API获取用户数据失败问题

我来帮你一步步排查这个问题，从你的代码来看，核心问题大概率出在认证机制或者请求配置上，咱们逐个分析：

1. 首先确认API令牌是否正确传递 #

你的Laravel路由用了auth:api中间件，这意味着只有携带有效API认证令牌的请求才能通过验证。你需要确保Vue的请求里正确带上了令牌：

• 如果你用的是Laravel Passport/Sanctum，要在请求头里添加Authorization: Bearer {你的令牌}
• 修改你的Vue请求代码，手动携带令牌（假设authenticatedUser里存储了用户的认证令牌）：

getUser () {
  this.$http.get('/api/user', {
    headers: {
      'Authorization': 'Bearer ' + this.authenticatedUser.token
    }
  })
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.error('请求失败:', error) // 加上错误捕获，方便看具体报错
  })
}

2. 检查请求URL的路径问题 #

你写的api/user/末尾带了斜杠，部分服务器的路由匹配规则会因此不生效，建议改成：

• 绝对路径：/api/user（前面加斜杠，避免相对路径导致的错误）
• 去掉末尾斜杠：api/user

3. 先验证Laravel后端是否正常 #

先跳过Vue，直接用Postman或者浏览器的开发者工具请求/api/user，带上正确的令牌：

• 如果这个请求也失败，说明是Laravel的认证配置有问题：比如Passport/Sanctum未正确安装、令牌过期、用户状态异常等
• 如果这个请求能正常返回用户数据，那问题就锁定在Vue的请求配置上

4. 全局配置Vue的HTTP客户端（可选优化） #

如果你用的是Vue Resource（从this.$http判断），可以在项目入口文件（比如main.js）里全局配置认证头，避免每个请求都重复写：

import VueResource from 'vue-resource'
Vue.use(VueResource)

// 假设令牌存在localStorage里
const token = localStorage.getItem('api_token')
if (token) {
  Vue.http.headers.common['Authorization'] = 'Bearer ' + token
}

5. 跨域问题（如果是前后端分离部署） #

如果你的Vue项目和Laravel后端不在同一域名下，要确保Laravel配置了正确的CORS规则：

• 可以使用barryvdh/laravel-cors包，在配置文件里允许携带认证头（Authorization）
• 确保Laravel的config/cors.php里supports_credentials设置为true

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