新闻资讯网站模板百度问一问
一、前言&&原理
前言：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，进行测试 发现已经实现效果了
下班~