当前位置：首页 > VUE

vue实现反向代理

2026-03-09 01:59:19VUE

Vue 中实现反向代理

在 Vue 项目中，通常通过配置开发服务器的代理功能来实现反向代理，主要用于解决开发环境中的跨域问题。以下是具体实现方法：

使用 vue.config.js 配置代理

在 Vue 项目的根目录下创建或修改 vue.config.js 文件，通过 devServer.proxy 配置代理规则：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://target-server.com', // 目标服务器地址
        changeOrigin: true, // 修改请求头中的 Origin 为目标地址
        pathRewrite: {
          '^/api': '' // 重写路径，去掉 /api 前缀
        }
      }
    }
  }
}

配置多个代理规则

如果需要代理多个不同的接口地址，可以配置多个规则：

module.exports = {
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://first-server.com',
        changeOrigin: true,
        pathRewrite: { '^/api1': '' }
      },
      '/api2': {
        target: 'http://second-server.com',
        changeOrigin: true,
        pathRewrite: { '^/api2': '' }
      }
    }
  }
}

使用环境变量配置代理

结合环境变量动态配置代理目标：

创建 .env.development 文件：

VUE_APP_API_BASE=/api
VUE_APP_API_TARGET=http://target-server.com

在 vue.config.js 中引用环境变量：

module.exports = {
  devServer: {
    proxy: {
        target: process.env.VUE_APP_API_TARGET,
        changeOrigin: true,
        pathRewrite: {
        }
      }
    }
  }
}

生产环境部署

开发环境的代理配置仅适用于 npm run serve。生产环境部署时，需要在 Web 服务器（如 Nginx）中配置反向代理：

vue实现反向代理

server {
  listen 80;
  server_name your-domain.com;

  location /api/ {
    proxy_pass http://target-server.com/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}