需求: 在项目中遇到了需要实时更换请求地址,后续使用修改后的请求地址(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
// 使用动态url
UrlFn(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请求中的值为修改后的值(即达到预期效果)
但是在实际的操作中,无法真正解决此问题,有懂的大佬可以指点一二
