vue实现反向代理

Vue 项目中实现反向代理

在 Vue 项目中实现反向代理通常通过配置 vue.config.js 文件来完成。反向代理主要用于解决开发环境中的跨域问题，将 API 请求转发到目标服务器。

配置 vue.config.js

在项目根目录下创建或修改 vue.config.js 文件，添加 devServer.proxy 配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-target-server.com', // 目标服务器地址
        changeOrigin: true, // 是否改变请求源
        pathRewrite: {
          '^/api': '' // 重写路径，去掉 /api 前缀
        }
      }
    }
  }
};

示例说明

假设目标 API 地址为 http://backend-api.com/user/list，在 Vue 项目中可以这样调用：

axios.get('/api/user/list').then(response => {
  console.log(response.data);
});

实际请求会被代理到 http://backend-api.com/user/list。

多路径代理配置

如果需要代理多个路径，可以配置多个代理规则：

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

生产环境配置

开发环境的反向代理配置仅在 npm run serve 时生效。生产环境需要通过 Web 服务器（如 Nginx）配置反向代理：

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

注意事项

• 修改 vue.config.js 后需要重启开发服务器。
• changeOrigin 设置为 true 可以修改请求头中的 Host 为目标地址。
• 路径重写 (pathRewrite) 是可选的，根据实际需求配置。