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-IPconst 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-IPconst 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，进行测试 发现已经实现效果了

下班~