跨域问题烦死人？小杨教你用vue-cli轻松搞定！

大家好，我是小杨，一个摸爬滚打6年的前端老司机。今天咱们聊一个让无数前端开发者头疼的问题------跨域 。尤其是刚入坑的小伙伴，看到浏览器报CORS错误的时候，是不是想砸键盘的心都有了？别急，今天我就手把手教你用vue-cli配置跨域，让你不再被这个问题困扰！

---

为什么会有跨域问题？

简单来说，浏览器出于安全考虑，默认不允许前端代码随便访问不同域名、端口或协议的接口（这就是同源策略）。比如：

• 你的前端跑在http://localhost:8080
• 后端接口在http://api.example.com

这时候直接调接口，浏览器就会无情地抛出一个CORS错误。

---

解决方案：vue-cli的代理配置

vue-cli内置了webpack-dev-server，可以通过代理绕过浏览器的同源限制（注意：这只是开发环境下的解决方案，生产环境需要后端配合）。

第一步：找到vue.config.js

没有这个文件？在项目根目录新建一个！

第二步：配置代理

module.exports = {
  devServer: {
    proxy: {
      '/api': {  // 以/api开头的请求才会走代理
        target: 'http://api.example.com', // 后端接口地址
        changeOrigin: true, // 是否改变请求源（必须true）
        pathRewrite: {
          '^/api': '' // 把/api替换成空字符串（去掉前缀）
        }
      }
    }
  }
}

第三步：重启项目

改完配置记得重启npm run serve！

---

实际例子

假设后端接口是http://api.example.com/user/list，前端代码可以这么写：

axios.get('/api/user/list').then(res => {
  console.log('我的用户数据：', res.data)
})

注意：

1. 请求写/api/user/list，代理会自动映射到http://api.example.com/user/list。
2. pathRewrite是把/api去掉，如果后端接口本身有/api前缀，可以不写这个配置。

---

常见问题排查

1. 代理没生效？

   • 检查vue.config.js是否在项目根目录
   • 确认请求路径以/api开头（或其他你配置的前缀）
   • 重启服务！重启服务！重启服务！（重要的事情说三遍）

2. 生产环境怎么办？

   • 开发环境用代理，生产环境需要后端配置CORS或Nginx反向代理。

3. 多个接口域名？

   代理支持多路径配置：

   proxy: {
     '/api1': { target: 'http://api1.com' },
     '/api2': { target: 'http://api2.com' }
   }

---

小杨的碎碎念

• 别偷懒 ：有些教程让你直接关浏览器安全策略（比如--disable-web-security），千万别这么干！这是掩耳盗铃，上线必炸。
• 联调必备：和后端兄弟对接时，提前问清楚接口路径，避免代理配置写错。
• 终极方案 ：如果是自己公司的项目，强烈建议后端配置CORS，一劳永逸。

搞定跨域，你的前端开发体验直接起飞！如果觉得有用，点个赞支持一下~ 遇到问题评论区见，小杨在线答疑

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！

​