网站点击量作用,谁有手机网站啊介绍一下,滨海做网站哪家好,wordpress菜单字变小一、前言原理
前言#xff1a;vue2 项目中#xff0c;请求接口是从表格的当前获取的#xff0c;也就是接口ip:端口号:路经不确定#xff0c;要实现点击表格当前行请求对应的接口
实现原理#xff1a;将实际要请求的ip等信息存在请求头中#xff0c;用的时候再…一、前言原理
前言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进行测试 发现已经实现效果了
下班~
