Vue.js中使用Axios请求Laravel 5.5 API报错问题求助

嘿，我一眼就瞅出问题所在了——你把CORS相关的请求头搞反啦！那些Access-Control-*开头的头是服务器返回给浏览器的响应头，不是前端请求要带的，你现在把它们塞进Axios的请求headers里完全没用，反而可能给请求添乱。

第一步：简化前端Axios请求 #

先把那些多余的CORS请求头删掉，简化你的代码，同时别忘了加上错误捕获，方便后续排查问题：

<script>
import axios from 'axios';

export default {
  data () {
    return {
      posts: {}
    }
  },
  created() {
    // 用简洁的get方法写法，去掉冗余请求头
    axios.get('http://localhost:8000/api/users')
      .then(response => {
        this.posts = response.data;
        // 加个可选链操作符，避免数组为空时报错
        console.log(this.posts[0]?.body);
      })
      .catch(error => {
        // 打印错误详情，方便定位问题
        console.error('请求出错啦:', error.response?.data || error.message);
      });
  }
}
</script>

第二步：在Laravel后端配置CORS #

Postman不遵循浏览器的跨域安全策略，所以测试没问题，但浏览器会拦截跨域请求，必须在Laravel里配置CORS规则。Laravel 5.5最省心的方式是用第三方包：

1. 安装barryvdh/laravel-cors包
   在项目根目录执行命令：

   composer require barryvdh/laravel-cors
   

2. 发布配置文件

   php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
   

3. 配置CORS规则
   打开config/cors.php，根据你的实际情况修改配置，比如：

   return [
       'paths' => ['api/*'], // 只对API路由生效
       'allowed_methods' => ['*'], // 允许所有请求方法
       'allowed_origins' => ['http://localhost:8080'], // 你的Vue项目运行地址（默认是8080）
       'allowed_origins_patterns' => [],
       'allowed_headers' => ['*'], // 允许所有请求头
       'exposed_headers' => [],
       'max_age' => 0,
       'supports_credentials' => true, // 如果需要带cookie就设为true
   ];
   

4. 注册CORS中间件
   打开app/Http/Kernel.php，在$middlewareGroups的api组里添加CORS中间件：

   protected $middlewareGroups = [
       'api' => [
           'throttle:60,1',
           'bindings',
           \Barryvdh\Cors\HandleCors::class, // 把这行加进去
       ],
   ];
   

最后一步：重启服务 #

修改完配置后，重启Laravel开发服务器和Vue项目，再发起请求应该就能正常获取数据了。

要是还有问题，记得看浏览器控制台的错误信息，把具体报错内容贴出来，更容易精准排查哦！

内容的提问来源于stack exchange，提问作者Камилов Тимур