需求: 在項目中遇到了需要實時更換請求地址,后續使用修改后的請求地址(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請求中的值為修改后的值(即達到預期效果)
但是在實際的操作中,無法真正解決此問題,有懂的大佬可以指點一二