【vue2 】项目中实现动态代理，服务器上通过nginx部署 实现动态代理

一、前言&&原理

前言：vue2 项目中，请求接口是从表格的当前获取的，也就是接口ip:端口号:路经不确定，要实现点击表格当前行请求对应的接口

实现原理：将实际要请求的ip等信息存在请求头中，用的时候再取出来，项目和服务器上使用形参代替，从而达到动态代理效果

二、代码部分

1.修改utils下request文件

即修改代理前缀
例如

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_DYNAMIC_API,
  // 超时
  timeout: 60000
})

2.增加环境变量

即env文件中增加VUE_APP_DYNAMIC_API = '/dt-api

3.文件api.js中修改

例如

// 接口
export function getSyncServer(url) {

    return requestdt({
        url: '/getconfigs',
        method: 'get',
        IP: url
    })
}

4.修改文件vue.config.js

增加代理，例如

[process.env.VUE_APP_DYNAMIC_API]: {
  target: 'http://default-target',  // 默认目标（如果没有动态 IP，使用默认目标）
  changeOrigin: true,
  pathRewrite: {
    ['^' + process.env.VUE_APP_DYNAMIC_API]: ''
  }, // 动态代理目标
  router: (req) => {
    // 从请求头中获取 X-Device-IP
    const deviceIp = req.headers['x-device-ip'];
    if (deviceIp) {
      // 根据 deviceIp 动态设置目标
      return `http://${deviceIp}`;
    }
    // 如果没有 X-Device-IP，使用默认目标
    return 'http://default-target';
  },
  onProxyReq: (proxyReq, req, res) => {
    // 获取请求头中的 X-Device-IP
    const deviceIp = req.headers['x-device-ip'];
    if (deviceIp) {
      // 如果 X-Device-IP 存在，动态设置目标
      proxyReq.setHeader('Host', deviceIp);  // 可以设置代理请求的 Host 头
      proxyReq.setHeader('X-Device-IP', deviceIp);  // 将 IP 添加到请求头中
      proxyReq.setHeader('X-Forwarded-For', deviceIp);  // 传递 X-Forwarded-For 头

      // 根据 X-Device-IP 动态设置目标
      proxyReq.setHeader('X-Target-Host', deviceIp);  // 动态设置目标主机（可选）
    }
  }
},

三、服务器部署

通过nginx 代理，修改nginx.conf配置文件

例如

location ^~/dt-api/ {

	set $backend_ip $http_x_device_ip;

          # 检查请求头是否为空
          if ($backend_ip = "") {
              set $backend_ip "192.168.110.41:9011";  # 默认 IP 地址
          }

          # 使用 IP 地址代理请求
          proxy_pass http://$backend_ip/getconfigs;

          access_log /usr/local/nginx/logs/access.log;
          add_header X-Backend-IP $backend_ip;

          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
          proxy_set_header X-Device-Ip $http_x_device_ip;
}

修改完后重新启动nginx，进行测试 发现已经实现效果了

下班~