vue实现正向代理

vue实现正向代理的方法

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

配置vue.config.js文件

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

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://target-domain.com', // 目标接口域名
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' // 路径重写规则
        }
      }
    }
  }
}

代理规则说明

• target指定后端服务地址，支持HTTP/HTTPS协议
• changeOrigin修改请求头中的Host为目标地址，通常设为true
• pathRewrite可重写请求路径，移除约定的前缀如/api

多代理配置

支持配置多个代理规则，应对不同接口路径的需求：

proxy: {
  '/api1': {
    target: 'http://domain1.com',
    changeOrigin: true
  },
  '/api2': {
    target: 'http://domain2.com',
    changeOrigin: true
  }
}

生产环境注意事项

开发环境的代理配置仅对npm run serve生效。生产环境需通过以下方式解决跨域：

• 使用Nginx反向代理
• 后端服务配置CORS
• 部署前后端同域

完整示例配置

module.exports = {
  devServer: {
    proxy: {
      '/weather': {
        target: 'https://api.weather.com',
        ws: true, // 代理websockets
        secure: false // 关闭SSL验证
      },
      '/auth': {
        target: 'http://auth.server',
        pathRewrite: {'^/auth': '/v1/auth'}
      }
    }
  }
}

配置完成后重启开发服务器即可生效。前端代码中请求/api/xxx会被自动代理到目标地址。