前端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, // 启用https
    open: 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 → 代理到目标服务器/data
    const 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;
   }
   

总结方案对比

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