简单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) => {
    // 是否需要设置 token
    const 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; // 限制存放数据5M
      if (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) => {
    // 是否需要设置 token
    const 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; // 限制存放数据5M
      if (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;

如果对你有帮助，点个👍

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Pyside6 --Qt设计师--简单了解各个控件的作用之：Item Views

Pyside6 --Qt设计师--简单了解各个控件的作用之：Item Views

目录 一、List View二、Tree View三、Table View四、Column View 一、List View 学习方法和Buttons一样&#xff0c;大家自己在qt设计师上面在属性编辑区进行相应的学习&#xff01; 我就先紧着qt设计师的页面进行讲解&#xff0c;部分内容查自AI。 后面有什么好用的控件或者…
阅读更多...
【vue2+Flowable工作流，审批流前端展示组件】

【vue2+Flowable工作流，审批流前端展示组件】

文章目录 概要整体架构流程技术细节小结 概要 vue2Flowable工作流&#xff0c;审批流前端展示组件。 本人已实现activiti工作流引入vue2&#xff0c; 如有需求请移步activiti工作流单独引入vue2方法, 全网最全!!! vue全局日期格式化成年月日 时分秒 如有需求请移步vuemomen…
阅读更多...
uni-app多环境配置动态修改

uni-app多环境配置动态修改

前言 这篇文章主要介绍uniapp在Hbuilderx 中&#xff0c;通过工程化&#xff0c;区分不同环境、动态修改小程序appid以及自定义条件编译&#xff0c;解决代码发布和运行时手动切换问题。 背景 当我们使用uniapp开发同一个项目发布不同的环境二级路径不同时&#xff0c;这时候…
阅读更多...
实现某海外大型车企（T）Cabin Wi-Fi 需求的概述

实现某海外大型车企（T）Cabin Wi-Fi 需求的概述

最近参与某海外大型车企&#xff08;T&#xff09;的 Wi-Fi 功能需求开发&#xff0c;T 提出了一个 Cabin Wi-Fi 的概念&#xff0c;首先我们先对 Cabin Wi-Fi 进行一个较全面的了解。 1. Cabin Wi-Fi 概念概述 Cabin Wi-Fi 通常指用于飞机客舱、火车车厢、豪华巴士或船舶上的无…
阅读更多...
如何在 Ubuntu 22.04 上安装和使用 Rust 编程语言环境

如何在 Ubuntu 22.04 上安装和使用 Rust 编程语言环境

简介 Rust 是一门由 Mozilla 开发的系统编程语言&#xff0c;专注于性能、可靠性和内存安全。它在没有垃圾收集的情况下实现了内存安全&#xff0c;这使其成为构建对性能要求苛刻的应用程序&#xff08;如操作系统、游戏引擎和嵌入式系统&#xff09;的理想选择。 接下来&…
阅读更多...
MATLAB图卷积神经网络GCN处理分子数据集节点分类研究

MATLAB图卷积神经网络GCN处理分子数据集节点分类研究

全文链接&#xff1a;https://tecdat.cn/?p38570 本文主要探讨了如何利用图卷积网络&#xff08;GCN&#xff09;对图中的节点进行分类。介绍了相关的数据处理、模型构建、训练及测试等环节&#xff0c;通过对分子数据集的操作实践&#xff0c;展示了完整的节点分类流程&#…
阅读更多...
简易CPU设计入门：本系统所写入的指令

简易CPU设计入门：本系统所写入的指令

项目代码下载 请大家首先准备好本项目所用的源代码。如果已经下载了&#xff0c;那就不用重复下载了。如果还没有下载&#xff0c;那么&#xff0c;请大家点击下方链接&#xff0c;来了解下载本项目的CPU源代码的方法。 下载本项目代码 准备好了项目源代码以后&#xff0c;我…
阅读更多...
rabbitMq举例

rabbitMq举例

新来个技术总监&#xff0c;把 RabbitMQ 讲的那叫一个透彻&#xff0c;佩服&#xff01; 生产者 代码举例 public String sendMsg(final String exchangeName,final String routingKey,final String msg) {} /*** 发送消息* param exchangeName exchangeName* param routin…
阅读更多...
对话小系统（智能图书助手）

对话小系统（智能图书助手）

对话小系统&#xff08;智能图书助手&#xff09; 文章说明核心代码效果展示源码下载 文章说明 现在GPT的功能十分强大&#xff0c;是否可以利用开源的接口来实现自己的智能小助手呢&#xff0c;我想到可以提供一些能力接口&#xff0c;然后对问询内容进行意图识别&#xff0c;…
阅读更多...
数智读书笔记系列006 协同进化：人类与机器融合的未来

数智读书笔记系列006 协同进化：人类与机器融合的未来

书名:协同进化&#xff1a;人类与机器融合的未来 作者:[美]爱德华阿什福德李 译者:李杨 出版时间:2022-06-01 ISBN:9787521741476 中信出版集团制作发行 爱德华・阿什福德・李&#xff08;Edward Ashford Lee&#xff09;是一位在计算机科学与工程领域颇具影响力的学者&am…
阅读更多...
C# 探险之旅：第二十七节 - 类型class(属性) —— 给你的类穿上“属性”的外衣

C# 探险之旅：第二十七节 - 类型class(属性) —— 给你的类穿上“属性”的外衣

嘿&#xff0c;探险家们&#xff01;欢迎再次踏上我们的C#奇幻之旅。今天&#xff0c;我们要聊聊一个超级有趣的话题——类的“属性”。想象一下&#xff0c;如果我们要给类穿上一件酷炫的外衣&#xff0c;那属性就是这件外衣上的各种口袋和装饰&#xff0c;让类变得既实用又拉…
阅读更多...
数据保护策略：如何保障重要信息的安全

数据保护策略：如何保障重要信息的安全

一、什么是数据安全&#xff1f; 数据安全是保护数字信息免遭盗窃、未经授权的访问和恶意修改的过程。这是一个持续的过程&#xff0c;负责监督信息的收集、存储和传输。 机密性&#xff1a;保护数据免遭未授权方访问。 完整性&#xff1a;保护数据免遭未经授权的修改、损坏…
阅读更多...
Mvc、Springmvc框架

Mvc、Springmvc框架

一.Mvc&#xff1a; 1.概念&#xff1a; MVC它是一种设计理念。把程序按照指定的结构来划分: Model模型 、View视图 、Controller控制层&#xff1b; 结构图&#xff1a; 二.Springmvc: 1.概念&#xff1a; springmvc框架它是spring框架的一个分支。它是按照mvc架构思想设计…
阅读更多...
【CSS in Depth 2 精译_078】12.6 调整字间距，提升可读性 + 12.7 本章小结

【CSS in Depth 2 精译_078】12.6 调整字间距，提升可读性 + 12.7 本章小结

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 12.2 Web 字体12.3 谷歌字体12.4 font-fac…
阅读更多...
Python高性能web框架-FastApi教程：(2)路径操作装饰器方法

Python高性能web框架-FastApi教程：(2)路径操作装饰器方法

路径操作装饰器方法 1. fastapi支持的各种请求方式 app.get() app.post() app.put() app.patch() app.delete() app.options() app.head() app.trace()2. 定义不同请求方式的路由 # 定义GET请求的路由 app.get(/get) def get_test():return {method: get方法} app.get(/get)…
阅读更多...
PostgreSQL 入门

PostgreSQL 入门

下载与安装 部分国产数据库采用PostgreSQL作为基础进行研发&#xff0c;因此先尝试了解一下原始数据库情况。 PostgreSQL 简称 PG 官网&#xff1a;https://www.postgresql.org/ PostgreSQL “世界上最先进的开源关系型数据库” 这是官网上的口号。 PostgreSQL: The World…
阅读更多...
Java-26 深入浅出 Spring - 实现简易Ioc-02 无IoC与AOP场景下实现业务

Java-26 深入浅出 Spring - 实现简易Ioc-02 无IoC与AOP场景下实现业务

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 大数据篇正在更新&#xff01;https://blog.csdn.net/w776341482/category_12713819.html 目前已经更新到了&#xff1a; MyBatis&#xff…
阅读更多...
工作流审批功能全解析：提升流程效率的关键要素

工作流审批功能全解析：提升流程效率的关键要素

1. 引言 在当今数字化时代&#xff0c;企业与组织的运营效率在很大程度上依赖于高效、精准的工作流审批系统。随着业务日益复杂且多样化&#xff0c;审批流程变得愈加细致和灵活。一个完善的工作流审批系统不仅能确保任务在组织内部有序流转、协调各方资源&#xff0c;还能实现…
阅读更多...
API接口示例：电商商品评论数据

API接口示例：电商商品评论数据

当然&#xff0c;以下是一个简化的电商商品评论数据API接口的示例。请注意&#xff0c;这只是一个示例&#xff0c;实际的API接口可能会更加复杂&#xff0c;并且会包含更多的验证、错误处理和安全措施。 API接口示例&#xff1a;电商商品评论数据 基础信息 API名称&#xf…
阅读更多...
HCIA-Access V2.5_2_2_2网络通信基础_IP编址与路由

HCIA-Access V2.5_2_2_2网络通信基础_IP编址与路由

网络层数据封装 首先IP地址封装在网络层&#xff0c;它用于标识一台网络设备&#xff0c;其中IP地址分为两个部分&#xff0c;网络地址和主机地址&#xff0c;通过我们采用点分十进制的形式进行表示。 IP地址分类 对IP地址而言&#xff0c;它细分为五类&#xff0c;A,B,C,D,E,…
阅读更多...
最新文章

Copyright @ 2022~2023