vue代理实现

Vue 代理实现方法

在 Vue 项目中，代理通常用于解决开发环境中的跨域问题，或模拟 API 请求。以下是常见的实现方式：

配置 devServer 代理

修改 vue.config.js 文件，通过 devServer.proxy 配置代理规则：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://target-domain.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

环境变量配置

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

// vue.config.js
const proxyTarget = process.env.VUE_APP_API_BASE_URL || 'http://default-domain.com'

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: proxyTarget,
        ws: true,
        changeOrigin: true
      }
    }
  }
}

多代理路径配置

为不同接口路径配置多个代理：

module.exports = {
  devServer: {
    proxy: {
      '/user-api': {
        target: 'http://user-service.com',
        pathRewrite: {'^/user-api': ''}
      },
      '/product-api': {
        target: 'http://product-service.com',
        pathRewrite: {'^/product-api': ''}
      }
    }
  }
}

代理请求头处理

需要自定义请求头时：

module.exports = {
  devServer: {
    proxy: {
      '/secure-api': {
        target: 'https://secure-domain.com',
        headers: {
          'X-Custom-Header': 'value'
        },
        secure: false
      }
    }
  }
}

绕过代理配置

某些情况下需要绕过代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend:8080',
        bypass: function(req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            return '/index.html'
          }
        }
      }
    }
  }
}

生产环境代理

对于生产环境，通常通过 Nginx 或其他服务器配置代理：

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

注意：代理配置仅适用于开发环境，生产环境应通过服务器配置或 CORS 策略解决跨域问题。