简单vue3前端打包部署到服务器，动态配置http请求头后端ip方法教程

vue3若依框架前端打包部署到服务器，需要部署到多个服务器上，每次打包会很麻烦，今天教大家一个动态配置请求头api的方法，部署后能动态获取(修改)对应服务器的请求ip

介绍两种方法，如有需要可以直接尝试步骤一，不行再用步骤二

方法一 、

只需要在request中获取地址栏的信息，不用新建文件

获取地址栏的http请求头

var baseUrlDt =window.location.protocol + "//" + window.location.hostname + ":8010";
let downloadLoadingInstance; // 动态ip打包时使用这条代码

request.js全部代码：

import axios from "axios";
import {ElNotification,ElMessageBox,ElMessage,ElLoading,
} from "element-plus";
import { getToken } from "@/utils/auth";
import errorCode from "@/utils/errorCode";
import { tansParams, blobValidate } from "@/utils/ruoyi";
import cache from "@/plugins/cache";
import { saveAs } from "file-saver";
import useUserStore from "@/store/modules/user";var baseUrlDt =window.location.protocol + "//" + window.location.hostname + ":8010";
let downloadLoadingInstance; // 动态ip打包时使用这条代码// 是否显示重新登录
export let isRelogin = { show: false };axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分// baseURL: import.meta.env.VITE_APP_BASE_API,baseURL: baseUrlDt, // 动态ip打包时使用这条代码// 超时timeout: 10000,
});// request拦截器
service.interceptors.request.use((config) => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === false;// 是否需要防止数据重复提交const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;if (getToken() && !isToken) {config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改}// get请求映射params参数if (config.method === "get" && config.params) {let url = config.url + "?" + tansParams(config.params);url = url.slice(0, -1);config.params = {};config.url = url;}if (!isRepeatSubmit &&(config.method === "post" || config.method === "put")) {const requestObj = {url: config.url,data:typeof config.data === "object"? JSON.stringify(config.data): config.data,time: new Date().getTime(),};const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小const limitSize = 5 * 1024 * 1024; // 限制存放数据5Mif (requestSize >= limitSize) {console.warn(`[${config.url}]: ` +"请求数据大小超出允许的5M限制，无法进行防重复提交验证。");return config;}const sessionObj = cache.session.getJSON("sessionObj");if (sessionObj === undefined ||sessionObj === null ||sessionObj === "") {cache.session.setJSON("sessionObj", requestObj);} else {const s_url = sessionObj.url; // 请求地址const s_data = sessionObj.data; // 请求数据const s_time = sessionObj.time; // 请求时间const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交if (s_data === requestObj.data &&requestObj.time - s_time < interval &&s_url === requestObj.url) {const message = "数据正在处理，请勿重复提交";console.warn(`[${s_url}]: ` + message);return Promise.reject(new Error(message));} else {cache.session.setJSON("sessionObj", requestObj);}}}return config;},(error) => {console.log(error);Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((res) => {// 未设置状态码则默认成功状态const code = res.data.code || 200;// 获取错误信息const msg = errorCode[code] || res.data.msg || errorCode["default"];// 二进制数据则直接返回if (res.request.responseType === "blob" ||res.request.responseType === "arraybuffer") {return res.data;}if (code === 401) {if (!isRelogin.show) {isRelogin.show = true;ElMessageBox.confirm("登录状态已过期，您可以继续留在该页面，或者重新登录","系统提示",{confirmButtonText: "重新登录",cancelButtonText: "取消",type: "warning",}).then(() => {isRelogin.show = false;useUserStore().logOut().then(() => {location.href = "/index";});}).catch(() => {isRelogin.show = false;});}return Promise.reject("无效的会话，或者会话已过期，请重新登录。");} else if (code === 500) {ElMessage({ message: msg, type: "error" });return Promise.reject(new Error(msg));} else if (code === 601) {ElMessage({ message: msg, type: "warning" });return Promise.reject(new Error(msg));} else if (code !== 200) {ElNotification.error({ title: msg });return Promise.reject("error");} else {return Promise.resolve(res.data);}},(error) => {console.log("err" + error);let { message } = error;if (message == "Network Error") {message = "后端接口连接异常";} else if (message.includes("timeout")) {message = "系统接口请求超时";} else if (message.includes("Request failed with status code")) {message = "系统接口" + message.substr(message.length - 3) + "异常";}ElMessage({ message: message, type: "error", duration: 5 * 1000 });return Promise.reject(error);}
);// 通用下载方法
export function download(url, params, filename, config) {downloadLoadingInstance = ElLoading.service({text: "正在下载数据，请稍候",background: "rgba(0, 0, 0, 0.7)",});return service.post(url, params, {transformRequest: [(params) => {return tansParams(params);},],headers: { "Content-Type": "application/x-www-form-urlencoded" },responseType: "blob",...config,}).then(async (data) => {const isBlob = blobValidate(data);if (isBlob) {const blob = new Blob([data]);saveAs(blob, filename);} else {const resText = await data.text();const rspObj = JSON.parse(resText);const errMsg =errorCode[rspObj.code] || rspObj.msg || errorCode["default"];ElMessage.error(errMsg);}downloadLoadingInstance.close();}).catch((r) => {console.error(r);ElMessage.error("下载文件出现错误，请联系管理员！");downloadLoadingInstance.close();});
}export default service;

方法二、

原理：打包的时候将动态的ip排除在打包外,不参与打包,类似于public文件夹下的index.html

步骤一、

在public文件夹下新建config.js文件，有的项目是static文件夹下

var ipConfig = {AXIOS_TIMEOUT: 10000,baseUrl: "http://xxx",//配置服务器IP及端口}

步骤二、

在根目录的index.html引入新增config.js，在项目中就可以使用了 

    <!-- 动态ip打包时使用这条代码 --><script type="text/javascript" src="/public/config.js"></script>

步骤三、

找到request.js文件，在拦截器中直接调用对象

const baseURL = window.ipConfig.baseUrl; // 动态ip打包时使用这条代码

request.js全部代码：

import axios from "axios";
import {ElNotification,ElMessageBox,ElMessage,ElLoading,
} from "element-plus";
import { getToken } from "@/utils/auth";
import errorCode from "@/utils/errorCode";
import { tansParams, blobValidate } from "@/utils/ruoyi";
import cache from "@/plugins/cache";
import { saveAs } from "file-saver";
import useUserStore from "@/store/modules/user";// axios.defaults.baseURL = window.ipConfig.BASE_URL//'http://192.168.1.177:8083/'
// // 开启认证
// axios.defaults.withCredentials = true
const baseURL = window.ipConfig.baseUrl; // 动态ip打包时使用这条代码
let downloadLoadingInstance;
// 是否显示重新登录
export let isRelogin = { show: false };axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分// baseURL: import.meta.env.VITE_APP_BASE_API,baseURL: baseURL, // 动态ip打包时使用这条代码// 超时timeout: 10000,
});// request拦截器
service.interceptors.request.use((config) => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === false;// 是否需要防止数据重复提交const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;if (getToken() && !isToken) {config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改}// get请求映射params参数if (config.method === "get" && config.params) {let url = config.url + "?" + tansParams(config.params);url = url.slice(0, -1);config.params = {};config.url = url;}if (!isRepeatSubmit &&(config.method === "post" || config.method === "put")) {const requestObj = {url: config.url,data:typeof config.data === "object"? JSON.stringify(config.data): config.data,time: new Date().getTime(),};const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小const limitSize = 5 * 1024 * 1024; // 限制存放数据5Mif (requestSize >= limitSize) {console.warn(`[${config.url}]: ` +"请求数据大小超出允许的5M限制，无法进行防重复提交验证。");return config;}const sessionObj = cache.session.getJSON("sessionObj");if (sessionObj === undefined ||sessionObj === null ||sessionObj === "") {cache.session.setJSON("sessionObj", requestObj);} else {const s_url = sessionObj.url; // 请求地址const s_data = sessionObj.data; // 请求数据const s_time = sessionObj.time; // 请求时间const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交if (s_data === requestObj.data &&requestObj.time - s_time < interval &&s_url === requestObj.url) {const message = "数据正在处理，请勿重复提交";console.warn(`[${s_url}]: ` + message);return Promise.reject(new Error(message));} else {cache.session.setJSON("sessionObj", requestObj);}}}return config;},(error) => {console.log(error);Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((res) => {// 未设置状态码则默认成功状态const code = res.data.code || 200;// 获取错误信息const msg = errorCode[code] || res.data.msg || errorCode["default"];// 二进制数据则直接返回if (res.request.responseType === "blob" ||res.request.responseType === "arraybuffer") {return res.data;}if (code === 401) {if (!isRelogin.show) {isRelogin.show = true;ElMessageBox.confirm("登录状态已过期，您可以继续留在该页面，或者重新登录","系统提示",{confirmButtonText: "重新登录",cancelButtonText: "取消",type: "warning",}).then(() => {isRelogin.show = false;useUserStore().logOut().then(() => {location.href = "/index";});}).catch(() => {isRelogin.show = false;});}return Promise.reject("无效的会话，或者会话已过期，请重新登录。");} else if (code === 500) {ElMessage({ message: msg, type: "error" });return Promise.reject(new Error(msg));} else if (code === 601) {ElMessage({ message: msg, type: "warning" });return Promise.reject(new Error(msg));} else if (code !== 200) {ElNotification.error({ title: msg });return Promise.reject("error");} else {return Promise.resolve(res.data);}},(error) => {console.log("err" + error);let { message } = error;if (message == "Network Error") {message = "后端接口连接异常";} else if (message.includes("timeout")) {message = "系统接口请求超时";} else if (message.includes("Request failed with status code")) {message = "系统接口" + message.substr(message.length - 3) + "异常";}ElMessage({ message: message, type: "error", duration: 5 * 1000 });return Promise.reject(error);}
);// 通用下载方法
export function download(url, params, filename, config) {downloadLoadingInstance = ElLoading.service({text: "正在下载数据，请稍候",background: "rgba(0, 0, 0, 0.7)",});return service.post(url, params, {transformRequest: [(params) => {return tansParams(params);},],headers: { "Content-Type": "application/x-www-form-urlencoded" },responseType: "blob",...config,}).then(async (data) => {const isBlob = blobValidate(data);if (isBlob) {const blob = new Blob([data]);saveAs(blob, filename);} else {const resText = await data.text();const rspObj = JSON.parse(resText);const errMsg =errorCode[rspObj.code] || rspObj.msg || errorCode["default"];ElMessage.error(errMsg);}downloadLoadingInstance.close();}).catch((r) => {console.error(r);ElMessage.error("下载文件出现错误，请联系管理员！");downloadLoadingInstance.close();});
}export default service;

如果对你有帮助，点个👍

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

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

相关文章

vue3-count-to实现数字动态增长效果

vue3-count-to实现数字动态增长效果

vue3-count-to 是一个用于 Vue 3的数字计数动画库&#xff0c;常用于在页面上实现数字的动态增长效果&#xff0c;类似于从某个起始值渐变到目标值的效果。它可以用来显示各种数字、统计数据或展示动画效果。 1 安装 vue3-count-to 首先&#xff0c;你需要安装 vue3-count-to …
阅读更多...
android AIDL ipc binder转换

android AIDL ipc binder转换

一. 概述 众所周知AIDL并不是所有的数据类型都可以传输。 可以传输的类型包括&#xff1a; 1.原生类型 2.String 3. CharSequence 4. List 5.Map 6. Binder 7. Parcelable 容器类 parcelable传输的时候会分解成成员&#xff0c;数组item的方式&#xff0c;传输完成后再进行…
阅读更多...
CityEngine实践——常用cga文件解析系列（2）

CityEngine实践——常用cga文件解析系列（2）

上回书说到了&#xff1a; 3、RULES/COMPONENTS/MASSING/SUBURBAN_BLOCK DETACHED_HOUSES.CGA ROWHOUSES.CGA SEMI_DETACHED_HOUSES.CGA 4、RULES/COMPONENTS/MASSING/URBAN_BLOCK MONOBLOCK.CGA PERIMETER_8_SHAPE.CGA PERIMETER_MULTIPART.CGA 这个cga挺有意思&#xff0c…
阅读更多...
【安全研究】某黑产网站后台滲透与逆向分析

【安全研究】某黑产网站后台滲透与逆向分析

文章目录 x01. 前言x02. 分析 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Python与爬虫领域研究与…
阅读更多...
ESP32外设学习部分--SPI篇

ESP32外设学习部分--SPI篇

SPI学习 前言 我个人以为开始学习一个新的单片机最好的方法就是先把他各个外设给跑一遍&#xff0c;整体了解一下他的功能&#xff0c;由此记录一下我学习ESP32外设的过程&#xff0c;防止以后忘记。 SPI 配置步骤 SPI总线初始化 spi_bus_config_t buscfg {.miso_io_num …
阅读更多...
禅道Bug的一次迁移

禅道Bug的一次迁移

一、场景 平时工作记录在公司禅道上的问题想备份一份到本地&#xff0c;但是又没有公司禅道的数据库信息&#xff0c;有时候出测试报告想批量调整数据方便截图很困难&#xff0c;同时也为了学习禅道数据流转过程&#xff0c;所以有了把缺陷保存到本地一份的想法。 实际上禅道支…
阅读更多...
Redis - 消息队列 Stream

Redis - 消息队列 Stream

一、概述 消息队列 定义 消息队列模型&#xff1a;一种分布式系统中的消息传递方案&#xff0c;由消息队列、生产者和消费者组成消息队列&#xff1a;负责存储和管理消息的中间件&#xff0c;也称为消息代理&#xff08;Message Broker&#xff09;生产者&#xff1a;负责 产…
阅读更多...
C语言数组和字符串笔记

C语言数组和字符串笔记

C语言数组和字符串笔记 1. 数组及其相关概念 1.1 为什么需要使用数组&#xff1f; 数组是一个有序的、类型相同的数据集合。这些数据被称为数组的元素。每个数组都有一个名字&#xff0c;数组名代表数组的起始地址。数组的元素通过索引或下标访问&#xff0c;索引从0开始。 …
阅读更多...
双目摄像头标定方法

双目摄像头标定方法

打开matlab 找到这个标定 将双目左右目拍的图像上传&#xff08;左右目最好不少于20张&#xff09; 等待即可 此时已经完成标定&#xff0c;左下角为反投影误差&#xff0c;右边为外参可视化 把这些误差大的删除即可。 点击导出 此时回到主页面&#xff0c;即可看到成功导出 Ca…
阅读更多...
数据结构开始——时间复杂度和空间复杂度知识点笔记总结

数据结构开始——时间复杂度和空间复杂度知识点笔记总结

好了&#xff0c;经过了漫长的时间学习c语言语法知识&#xff0c;现在我们到了数据结构的学习。 首先&#xff0c;我们得思考一下 什么是数据结构&#xff1f; 数据结构(Data Structure)是计算机存储、组织数据的方式&#xff0c;指相互之间存在一种或多种特定关系的数据元素…
阅读更多...
什么是MMD Maximum Mean Discrepancy 最大均值差异？

什么是MMD Maximum Mean Discrepancy 最大均值差异？

9多次在迁移学习看到了&#xff0c;居然还是Bernhard Schlkopf大佬的论文&#xff0c;仔细看看。 一.什么是MMD&#xff1f; 1. MMD要做什么&#xff1f; 判断两个样本&#xff08;族&#xff09;是不是来自于同一分布 2.怎么做&#xff1f;&#xff08;直观上&#xff09;…
阅读更多...
电梯内电动车识别数据集，可准确识别电梯内是否有电动车 支持YOLO，COCO，VOC三种格式的标注 7111张图片

电梯内电动车识别数据集，可准确识别电梯内是否有电动车 支持YOLO，COCO，VOC三种格式的标注 7111张图片

电梯内电动车识别数据集&#xff0c;可识别电梯内是否有电动车 支持YOLO&#xff0c;COCO&#xff0c;VOC三种格式的标注 7111张图片 7111总图像数 数据集分割 训练组 74&#xff05; 5291图片 有效集 16% 1168图片 测试集 9&#xff05; 652…
阅读更多...
Collection接口

Collection接口

目录 一. Collection基本介绍 二. Collection中的方法及其使用 1. 添加元素 (1) 添加单个元素 (2) 添加另一集合中的所有元素 2. 删除元素 (1) 删除单个元素 (2) 删除某个集合中包含在其他集合中的元素 (3) 保留两个集合中的交集部分, 删除其他元素. 3. 遍历元素 (1) …
阅读更多...
Mybatis Plus 3.0 快速入门

Mybatis Plus 3.0 快速入门

1、简介 MyBatis-Plus （简称 MP）是一个 MyBatis 的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。 2、创建并初始化数据库 2.1、创建数据库 mybatis_plus 2.2、创建 User 表 其表结构如下： idnameageemail1Jone18test1@baomidou.com2Jack…
阅读更多...
Verilog实现图像处理的行缓存Line Buffer

Verilog实现图像处理的行缓存Line Buffer

在图像处理中&#xff0c;难免会遇到对图像进行卷积或者模板的局部处理&#xff0c;例如ISP中的一些算法&#xff0c;很大部分都需要一个窗口&#xff0c;在实时视频处理中&#xff0c;可以利用行缓存Line buffer可以暂存几行数据&#xff0c;然后同时输出每行中的对应列的像素…
阅读更多...
【银河麒麟高级服务器操作系统】有关dd及cp测试差异的现象分析详解

【银河麒麟高级服务器操作系统】有关dd及cp测试差异的现象分析详解

了解更多银河麒麟操作系统全新产品&#xff0c;请点击访问 麒麟软件产品专区&#xff1a;https://product.kylinos.cn 开发者专区&#xff1a;https://developer.kylinos.cn 文档中心&#xff1a;https://documentkylinos.cn dd现象 使用银河麒麟高级服务器操作系统执行两次…
阅读更多...
ORACLE逗号分隔的字符串字段，关联表查询

ORACLE逗号分隔的字符串字段，关联表查询

使用场景如下&#xff1a; oracle12 以前的写法&#xff1a; selectt.pro_ids,wm_concat(t1.name) pro_names from info t,product t1 where instr(,||t.pro_ids|| ,,,|| t1.id|| ,) > 0 group by pro_ids oracle12 以后的写法&#xff1a; selectt.pro_ids,listagg(DIS…
阅读更多...
记录2024-leetcode-字符串DP

记录2024-leetcode-字符串DP

10. 正则表达式匹配 - 力扣&#xff08;LeetCode&#xff09;
阅读更多...
微信开发者工具（小程序）的版本管理，Git Push 和 Pull

微信开发者工具（小程序）的版本管理，Git Push 和 Pull

微信开发者工具&#xff08;小程序&#xff09;的版本管理&#xff0c;Git Push 和 Pull 一、设置 第一次用微信开发者工具自带的版本管理的拉取和推送功能&#xff0c;稍稍的研究了下。 1、首先要先设置 “用户”&#xff0c;名字和邮箱&#xff0c;不一定要真名&#xff0c…
阅读更多...
2020-12-07 光棍数

2020-12-07 光棍数

由光棍数的特征可推导其商的个位数不存在偶数且只有1、3、7、9这4个数。一个数可匹配多个光棍数且必定是中间隔着0的循环数。 void 光棍数(int n) {//缘由http://ask.csdn.net/questions/3444069 做乘法运行时间超长int w 0; long long x 111111111111111, j 0;//j x*n;/…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023