当前位置：首页 > news >正文

如何实现动态请求地址(baseURL)

news 来源：原创 2025/4/20 14:10:30

需求: 在项目中遇到了需要实时更换请求地址,后续使用修改后的请求地址(IP)

例如:原ip请求为'http://192.168.1.1:80/xxx',现在需要你点击或其他操作将其修改为'http://192.168.1.2:80/xxx',该如何操作

tips: 修改后需要跳转( 修改了IP之前的不可使用,需要访问修改后的地址来操作 )

思路: 通过重新创建axios实例来重新生成对应配置

具体思路可参考方案1代码中注释

具体方案如下,一共3种:

方案1:可用

通过当前浏览器的 location 来直接生成对应baseURL,代码如下

// 需要重新赋值,因此不使用const
let Sever = ''
// 需要在指定操作时,重新生成,因此封装为函数的方式,并利用export导出
export const changeIP = () => {let url = ''// 利用 origin 直接读取当前的ip地址if (location.origin) {url = location.origin// 下列 else是因为部分浏览器可能不支持origin,因此做代码稳健处理} else if (location.port) { // 判断post是否有端口// 有端口则进行拼接url = `${location.protocol}//${location.hostname}:${location.port}`} else {// 无端口则默认端口url = `${location.protocol}//${location.hostname}`}Sever = axios.create({baseURL: url,// 其他配置可自行配置withCredentials: true,})
}
// 初次加载调用
changeIP()// 后续可使用请求拦截器(Sever.interceptors.request.use)
//          响应拦截器(Sever.interceptors.response.use)

方案2:可用

通过函数传参的方式,重新调用生成,代码如下:

// 为拦截器预留函数
import { requestFn } from '../utils/request.js'// 初始地址
let BaseUrl = 'http://192.168.1.xxx:xxx/'
let AllUrl = BaseUrl
// 通过调用getSerApiUrl时,传入参数进行拼接等操作,具体看项目需求
export const getSerApiUrl = (Val) => {AllUrl = BaseUrl + Val// 使用动态urlUrlFn(AllUrl)
}let Sever = ''
const UrlFn = (url) => {Sever = axios.create({baseURL: url,timeout: 3000,withCredentials: true,})
}
// 自调用使用初始url
UrlFn(BaseUrl)// request.js
// 把创建好的axios实例以参数的形式传过来
export const requestFn = (Sever) => {// 请求拦截器// 响应拦截器
}

方案3:不可用 (有坑)

通过 localStorage 的存储机制,进行修改,思路与方案1类似,

问题点: 当通过 localStorage 修改IP进行跳转后,此时请求中的IP地址为修改前的IP,查看浏览器中的存储时,确实修改过来了,刷新页面后可使用修改后的IP进行请求

具体代码如下:

let Sever = ''
export const changeIP = () => {Sever = axios.create({// 预期在此处重新调用时,已经重新生成实例并可使用baseURL: localStorage.getItem('ip'),withCredentials: true,})
}
changeIP()// 具体使用时调用如下
// 预期效果:
// 1. 通过 localStorage.setItem 来设置新的请求地址
// 2. 调用changeIP函数,来重新创建axios实例,从而使用新的请求地址
localStorage.setItem('ip', ip)
changeIP()

解决方案1:

经排查发现并非受异步影响( 即不存在在调用时修改的localStorage,在changeIP函数中读取不到的问题 ) ===> 未解决

解决方案2:

在跳转页面后新增强制刷新操作( 即location.reload() ),跳转后未能达到预期效果 ===> 未解决

最终推断问题原因:

在切换IP后,不同域名存储的数据不互通,跳转到修改后的IP地址时,此时读取到的为修改前的IP地址

经测试,跳转至同一域名情况下,此时的IP请求中的值为修改后的值(即达到预期效果)

但是在实际的操作中,无法真正解决此问题,有懂的大佬可以指点一二