简单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，一经查实，立即删除！

相关文章

【笔记】记录对python中.grad()的一些理解

【笔记】记录对python中.grad()的一些理解

这几天再看神经网络&#xff0c;有点不明白.grad()、.detach()、.backward()等等等等这些关于梯度计算的东西&#xff0c;今天好像理解了一点&#xff0c;来做一个自己理解的总结。 首先来看一段非常简单的代码&#xff1a; import torchX torch.tensor([1.0, 2.0, 3.0], re…
阅读更多...
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…
阅读更多...
贪心算法 - 学习笔记 【C++】

贪心算法 - 学习笔记 【C++】

2024-12-09 - 第 38 篇 贪心算法 - 学习笔记 作者(Author): 郑龙浩 / 仟濹(CSND账号名) 贪心算法 学习课程&#xff1a; https://www.bilibili.com/video/BV1f84y1i7mv/?spm_id_from333.337.search-card.all.click&vd_source2683707f584c21c57616cc6ce8454e2b 一、基本…
阅读更多...
【安全研究】某黑产网站后台滲透与逆向分析

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

文章目录 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 …
阅读更多...
Viewer.js----图片查看

Viewer.js----图片查看

Viewer.js 是一个用于展示图片、视频等多媒体内容的轻量级 JavaScript 库&#xff0c;提供了现代的图片查看器功能&#xff0c;比如放大、缩小、旋转、拖动等操作&#xff0c;适用于浏览器中查看图片等资源。 官网地址&#xff1a;Viewer.js 详细说明&#xff1a;Viewer.js –…
阅读更多...
禅道Bug的一次迁移

禅道Bug的一次迁移

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

[ShaderLab] 【Unity】【图像编程】理解 Unity Shader 的结构

在计算机图形学领域，开发者经常面临着管理着色器复杂性的挑战。正如大卫惠勒（David Wheeler）所说：“计算机科学中的任何问题都可以通过增加一层抽象来解决。” Unity 提供了这样一层抽象，即 ShaderLab，它通过组织和定义渲染过程的各个步骤，简化了编写着色器的过程。 什…
阅读更多...
redis 怎么样查看list

redis 怎么样查看list

在 Redis 中&#xff0c;可以通过以下方法查看列表的内容或属性&#xff1a; 1. 查看列表中的所有元素 使用 LRANGE 命令&#xff1a; LRANGE key start endkey 是列表的名称。start 是起始索引&#xff0c;0 表示第一个元素。end 是结束索引&#xff0c;-1 表示最后一个元素…
阅读更多...
Redis - 消息队列 Stream

Redis - 消息队列 Stream

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

C语言数组和字符串笔记

C语言数组和字符串笔记 1. 数组及其相关概念 1.1 为什么需要使用数组&#xff1f; 数组是一个有序的、类型相同的数据集合。这些数据被称为数组的元素。每个数组都有一个名字&#xff0c;数组名代表数组的起始地址。数组的元素通过索引或下标访问&#xff0c;索引从0开始。 …
阅读更多...
淘宝详情网页爬虫：技术解析与实战指南

淘宝详情网页爬虫：技术解析与实战指南

引言 淘宝作为中国最大的电商平台之一&#xff0c;拥有海量的商品数据。对于开发者来说&#xff0c;获取淘宝商品详情接口是一个常见的需求。本文将介绍如何使用Python编写爬虫&#xff0c;获取淘宝商品详情信息&#xff0c;并探讨在实际应用中可能遇到的挑战与解决方案。 环…
阅读更多...
双目摄像头标定方法

双目摄像头标定方法

打开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;…
阅读更多...
计算机操作系统虚拟化与云计算教学指南

计算机操作系统虚拟化与云计算教学指南

一、引言 在当今数字化时代&#xff0c;计算机操作系统虚拟化和云计算已成为信息技术领域的核心技术。无论是大型企业的数据中心&#xff0c;还是个人开发者的工作环境&#xff0c;都广泛应用着这些技术。本教学博客将深入探讨虚拟化的基本概念、虚拟化技术、云计算等重要内容…
阅读更多...
电梯内电动车识别数据集，可准确识别电梯内是否有电动车 支持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) …
阅读更多...
最新文章

Copyright @ 2022~2023