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

下班~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/63899.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【指南】03 CSC联系外导

确定外导 课题组有合作关系的国外导师与自己研究方向密切相关的国外导师国外高校官网、谷歌学术、Research Gate等平台检索不可以是中国港澳台的高校科研院所或机构注意外导所在高校排名和科研水平可列表记录注意外国签证政策 发送邮件 自我介绍简要介绍CSC介绍自己的研究对…

DOM与BOM试题

基础回顾题(48分,1分1道题) querySelector 基础 写出一段代码&#xff0c;使用querySelector选择页面上第一个<button>元素&#xff0c;并打印该元素到控制台。 querySelectorAll 基础 使用querySelectorAll选择所有类名为item的元素&#xff0c;并打印这些元素组成的N…

20.LMAX——DDD的极致性能架构

学习视频来源&#xff1a;DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 历史起源架构目标架构要素 时序对比传统时序事件溯源时序LMAX时序 单线程非阻塞异步IO&#xff08;reactor&#xff09;多线程单…

记uniapp、android studio开发原生插件时监听globalEvent 事件

globalEvent 事件&#xff1a;用于页面监听持久性事件&#xff0c;例如定位信息&#xff0c;陀螺仪等的变化。 在vue页面&#xff1a; 获取原生组件&#xff1a; var myGlobalEvent uni.requireNativePlugin(globalEvent); 通过plus.globalEvent.addEventListener方法注册全…

MFC集成WebBrowser控件的实例教程

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;本文提供了如何在MFC应用程序中集成WebBrowser控件的详细步骤&#xff0c;该控件利用ActiveX技术实现内嵌IE浏览器引擎功能。读者将学习如何创建对话框、处理控件事件&#xff0c;并添加导航功能以实现网页浏览。…

解决:IDEA中@Autowired自动注入MyBatis Mapper报红警告的几种解决方法

文章目录 解决&#xff1a;IDEA中Autowired自动注入MyBatis Mapper报红警告的几种解决方法问题描述&#xff1a;解决办法&#xff1a;1.将Autowired注解改成Resource2.给Autowired(required false)设置属性3.给Mapper层加注解Mapper/Repository4.改变写法,用RequiredArgsConst…

GTF转为excel文件

1. 加载必需的 R 包 在处理基因组数据时&#xff0c;我们通常需要一些专门的 R 包来读取、操作和导出数据。以下是常用的包&#xff1a; library(rtracklayer) # 用于导入 GTF 文件数据 library(writexl) # 用于导出数据到 Excel 格式 (.xlsx) library(openxlsx) …

python 调Qt C++ 写法配置和坑点

python 示例写法 和调c动态库一样 通过回调函数方式 将python函数注册到c 动态库中 from ctypes import *def DllCall(nParam, nFlag):print(nParam, nFlag)z2 0.6z3 0.4z4 0.0z5 0.3z6 0.5z7 0.8z8 0.3z9 0.9strData str(z2) str(z3) str(z4) str(z5)…

在Docker中运行MySQL的思考:挑战与解决方案

引言 在云计算和容器化技术日益普及的今天&#xff0c;Docker作为一种轻量级的容器化平台&#xff0c;已经成为开发和部署应用的首选工具之一。其提供的便携性、可扩展性和环境一致性对于无状态微服务来说无疑是巨大的福音。然而&#xff0c;并非所有应用都适合在Docker容器中…

Cesium 限制相机倾斜角(pitch)滑动范围

1.效果 2.思路 在项目开发的时候&#xff0c;有一个需求是限制相机倾斜角&#xff0c;也就是鼠标中键调整视图俯角时&#xff0c;不能过大&#xff0c;一般 pitch 角度范围在 0 至 -90之间&#xff0c;-90刚好为正俯视。 在网上查阅了很多资料&#xff0c;发现并没有一个合适的…

Navicat for MySQL 查主键、表字段类型、索引

针对Navicat 版本11 &#xff0c;不同版本查询方式可能不同 1、主键查询 &#xff08;重点找DDL&#xff01;&#xff01;&#xff01;&#xff09; 方法&#xff08;1&#xff09; &#xff1a;右键 - 对象信息 - 选择要查的表 - DDL - PRIMARY KEY 方法&#xff08;2&…

软考系分:今日成绩已出

前言 今年报考了11月份的软考高级&#xff1a;系统分析师。 考试时间&#xff1a;11月9日。 总体感觉偏简单&#xff0c;但是知识点记得不牢&#xff0c;估计机会不大。 今日 12.11 &#xff0c;成绩已出&#xff0c;每科总分 75分&#xff0c;全部45分以上为通过。 成绩总…

Linux学习笔记15 何为HDD,SSD?sata?PCIE?分区,MBR,GPT分区的理解

Linux学习怎么能不知道电脑的重要组成硬盘的知识呢&#xff1f; 前文有学习文件系统的概念。介绍了Linux组织文件的方式和文件的分类。 但是最初的时候&#xff0c;最先有的并不是文件系统。而是磁盘。 要我说&#xff0c;最关键的那句话就是&#xff1a;分区存在自己的文件…

angular图表echarts设置

angular框架ngx-echarts图表的配置 图表高度设置 默认高度是400px 可以自己动态设置容器高度 <div echarts nz-row nzJustify"start" [options]"option" [style.height]"option.echartHeight"></div>option.echartHeight‘600px’…

springboot402航班进出港管理系统(论文+源码)_kaic

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统航班进出港管理系统信息管理难度大&#xff0c;容错率低…

umi实现动态获取菜单权限

文章目录 前景登录组件编写登录逻辑菜单的时机动态路由页面刷新手动修改地址 前景 不同用户拥有不同的菜单权限&#xff0c;现在我们实现登录动态获取权限菜单。 登录组件编写 //当我们需要使用dva的dispatch函数时&#xff0c;除了通过connect函数包裹组件还可以使用这种方…

【云原生知识】Kubernets实践-前端服务如何访问后端服务

文章目录 概述步骤1&#xff1a;部署后端服务步骤2&#xff1a;配置Nginx步骤3&#xff1a;创建Nginx服务总结 如何确保 Nginx 能持续访问后端服务&#xff1f;相关文献 概述 假设你正在使用Kubernetes作为容器云平台&#xff0c;以下是如何配置Nginx以及相关服务&#xff0c;…

MySQL中count(*)、count(1)和count(字段名)有什么区别

MySQL中COUNT(*)、COUNT(1)和COUNT(字段名)的区别&#xff1a; 计数类型描述是否计算NULL值性能考虑COUNT(*)计算包括所有列的行数是&#xff0c;不区分列值是否为NULL通常最优&#xff0c;因为不需要检查特定列的值COUNT(1)功能上与COUNT(*)等价&#xff0c;计算行数是&#…

【计算机网络层】数据链路层 :局域网和交换机

&#x1f9f8;安清h&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;【计算机网络】【Mybatis篇】 &#x1f6a6;作者简介&#xff1a;一个有趣爱睡觉的intp&#xff0c;期待和更多人分享自己所学知识的真诚大学生。 目录 &#x1f3af;局域网 &#x1f6a6;局域网…

C# 属性(Property)

C# 属性(Property) C# 中的属性(Property)是一种用于访问和设置类或结构成员的值的特殊类型的方法。属性允许开发者以字段的形式访问方法,提供了更为安全和灵活的数据封装。在本文中,我们将深入探讨 C# 属性的概念、用途、以及如何有效地使用它们。 属性的定义 属性由…