wordpress建站腾讯云,网页设计十大排名,汕头企业网站建设设计,微信小程序开发制作多少钱需求: 在项目中遇到了需要实时更换请求地址,后续使用修改后的请求地址(IP)
例如:原ip请求为http://192.168.1.1:80/xxx,现在需要你点击或其他操作将其修改为http://192.168.1.2:80/xxx,该如何操作
tips: 修改后需要跳转( 修改了IP之前的不可使用,需要访问修改后的地址来操作 …需求: 在项目中遇到了需要实时更换请求地址,后续使用修改后的请求地址(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请求中的值为修改后的值(即达到预期效果)
但是在实际的操作中,无法真正解决此问题,有懂的大佬可以指点一二
