网站维护需要学什么,福建交科建设有限公司官方网站,在线教育培训wordpress主题,VIP视频网站有得做吗vue3若依框架前端打包部署到服务器#xff0c;需要部署到多个服务器上#xff0c;每次打包会很麻烦#xff0c;今天教大家一个动态配置请求头api的方法#xff0c;部署后能动态获取(修改)对应服务器的请求ip
介绍两种方法#xff0c;如有需要可以直接尝试步骤一#xff…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;charsetutf-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 typetext/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;charsetutf-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;如果对你有帮助点个
