前端vue框架实现反向代理详解

目录

简介

Vue2与Vue3跨域解决方案（反向代理实现）

跨域问题本质

Vue2实现方案（基于vue-cli）

Vue3实现方案（基于Vite）

前端请求示例

工作原理图解

常见问题解决

总结方案对比

---

简介

在日常前端开发中，我们总会遇到 Access to XMLHttpRequest at *** from origin 的报错，这种情况就是跨域造成的，在项目中如果需要我们前端解决跨域怎么解决跨域呢？接下来给大家介绍一下代理。

Vue2与Vue3跨域解决方案（反向代理实现）

跨域问题本质

浏览器同源策略限制导致：当前端域名（如localhost:8080）请求后端接口（如api.example.com）时触发跨域错误。解决方案核心是通过代理服务器中转请求。

---

Vue2实现方案（基于vue-cli）

在vue.config.js中配置代理：

module.exports = {devServer: {host: "0.0.0.0", // 允许外部ip访问port: 8080, // 自定义修改8080端口https: false, // 启用httpsopen: false, //build自动打开浏览器proxy: {// 代理规则1：匹配/api开头的请求'/api': {target: 'http://192.168.1.20', // 目标服务器地址changeOrigin: true,               // 开启虚拟主机pathRewrite: {'^/api': ''                     // 重写路径：移除/api前缀}},// 代理规则2：匹配/static开头的请求'/static': {target: '...', // 配置你需要代理的地址changeOrigin: true}}}
}

代码解释：

1. 当请求/api/user时 → 转发到http://192.168.1.20/user
2. changeOrigin: true 修改请求头Host为目标地址
3. 开发环境生效，生产环境需Nginx配置

---

Vue3实现方案（基于Vite）

在vite.config.js中配置代理：

export default defineConfig({server: {proxy: {// 代理规则'/api': {target: 'http://192.168.1.20', changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '') // 路径重写}}}
})

关键差异：

1. Vite使用server.proxy而非devServer.proxy
2. 路径重写改用rewrite函数
3. 支持WebSocket代理（自动启用）

---

前端请求示例

无论Vue2/Vue3，前端请求方式一致：

// 使用axios示例
import axios from 'axios';// 本地请求路径（将被代理）
const fetchData = async () => {try {// 请求 /api/data → 代理到目标服务器/dataconst res = await axios.get('/api/data'); console.log(res.data);} catch (err) {console.error('请求失败', err);}
}

---

工作原理图解

浏览器请求
localhost:8080/api/data│▼
Vue开发服务器（代理）│▼ 转发请求
目标服务器
your-backend.com/data│▼ 返回响应
Vue开发服务器│▼ 返回浏览器
浏览器接收数据

---

常见问题解决

1. 404错误：

   • 检查target地址是否正确
   • 确认后端服务是否运行
   • 使用curl http://your-backend.com/data测试接口

2. 代理未生效：

   • Vue2：确认配置文件名为vue.config.js
   • Vue3：确认在vite.config.js中配置
   • 重启开发服务器

3. 生产环境部署：

   # Nginx配置示例
   location /api/ {proxy_pass http://your-backend.com/;proxy_set_header Host $host;
   }
   

---

总结方案对比

特性	Vue2 (Webpack)	Vue3 (Vite)
配置文件	vue.config.js	vite.config.js
代理配置项	devServer.proxy	server.proxy
热更新速度	较慢	极快
路径重写	pathRewrite对象	rewrite函数

注意：代理仅在开发环境生效，生产环境需通过Nginx或云服务配置代理。