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

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


为什么会有跨域问题?

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

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

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


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

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

第一步:找到vue.config.js

没有这个文件?在项目根目录新建一个!

第二步:配置代理

javascript 复制代码
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,前端代码可以这么写:

javascript 复制代码
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. 生产环境怎么办?

    • 开发环境用代理,生产环境需要后端配置CORSNginx反向代理。
  3. 多个接口域名?

    代理支持多路径配置:

    javascript 复制代码
    proxy: {
      '/api1': { target: 'http://api1.com' },
      '/api2': { target: 'http://api2.com' }
    }

小杨的碎碎念

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

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

⭐ 写在最后

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

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

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

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

✅ 解答我文章中一些疑问

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

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

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

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

相关推荐
睡美人的小仙女1271 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
yuanyxh1 小时前
React Native 初体验
前端·react native·react.js
大宝贱1 小时前
H5小游戏-超级马里奥
javascript·css·html·h5游戏·超级马里奥
程序视点1 小时前
2025最佳图片无损放大工具推荐:realesrgan-gui评测与下载指南
前端·后端
程序视点2 小时前
2023最新HitPaw免注册版下载:一键去除图片视频水印的终极教程
前端
喔烨鸭3 小时前
前后端分离情况下,将本地vue项目和Laravel项目以及mysql放到自己的云服务器
vue.js·mysql·laravel
小只笨笨狗~4 小时前
el-dialog宽度根据内容撑开
前端·vue.js·elementui
weixin_490354344 小时前
Vue设计与实现
前端·javascript·vue.js
GISer_Jing4 小时前
React过渡更新:优化渲染性能的秘密
javascript·react.js·ecmascript
烛阴5 小时前
带你用TS彻底搞懂ECS架构模式
前端·javascript·typescript