如何實現動態請求地址(baseURL)

需求: 在項目中遇到了需要實時更換請求地址,后續使用修改后的請求地址(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請求中的值為修改后的值(即達到預期效果)

但是在實際的操作中,無法真正解決此問題,有懂的大佬可以指點一二

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/901541.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/901541.shtml
英文地址,請注明出處:http://en.pswp.cn/news/901541.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Open AI 使用篇

一.function Calling 大模型中的 function calling 指的是在人工智能模型(如 GPT-4)中調用外部函數或API,以便模型能夠執行更復雜的任務或獲取外部數據。這種方式允許模型在生成回答時不僅僅依賴于內部的訓練數據,還能夠與外部系…

6.DJI-PSDK:psdk訂閱無人機高度/速度/GPS/RTK/時間/經緯度等消息及問題解決

DJI-PSDK:psdk訂閱無人機高度/速度/GPS/RTK/時間/經緯度等消息 消息訂閱可以獲取絕大多數無人機的動態信息,包括無人機的姿態、速度、加速度、角速度、高度、GPS 位置、云 臺的角度和狀態、飛行模式和飛行狀態、電機和電池等各類關鍵信息。 這些信息并不會“一股腦兒地”全部…

100 個網絡安全基礎知識

1. 什么是網絡安全? 網絡安全是指采取必要措施,防范對網絡的攻擊、侵入、干擾、破壞和非法使用以及意外事故,使網絡處于穩定可靠運行的狀態,保障網絡數據的完整性、保密性、可用性。(參考《中華人民共和國網絡安全法》…

第七屆IEEE通信、信息系統與計算機工程國際會議(CISCE 2025)

重要信息 官網:www.iccisce.com 時間:2025年5月9-11日 地點:中國-廣州 征稿主題 通信技術 信息系統 ?5G/6G通信系統與網絡 ?無線通信與移動網絡 ?光纖通信與光網絡 ?衛星與空間通信 ?通信信號處理與編碼 ?無線傳感器網絡 ?物聯網…

OpenCV 圖像拼接

一、圖像拼接的介紹 圖像拼接是一種將多幅具有部分重疊內容的圖像合并成一幅完整、無縫且具有更廣闊視野或更高分辨率圖像的技術。其目的是通過整合多個局部圖像來獲取更全面、更具信息價值的圖像內容。 二、圖像拼接的原理 圖像拼接的核心目標是將多幅有重疊區域的圖像進行準…

第十一章 網絡編程

在TCP/IP協議中,“IP地址TCP或UDP端口號”唯一標識網絡通訊中的一個進程。 因此可以用Socket來描述網絡連接的一對一關系。 常用的Socket類型有兩種:流式Socket(SOCK_STREAM)和數據報式Socket(SOCK_DGRAM&#xff09…

ffmpeg實現視頻流抽幀

ffmpeg 實現視頻流抽幀 抽取實時視頻幀 如果你的實時視頻是通過 RTSP、UDP 或其他協議獲取的,可以直接調用 FFmpeg 命令來抽取幀。 ffmpeg 命令 示例 1 ffmpeg -i rtsp://your_rtsp_stream_url -vf fps1 -update 1 output.jpg說明: -i rtsp://your…

【GIT】放棄”本地更改,恢復到遠程倉庫的狀態git fetch origin git reset --hard origin/分支名

如果你想完全放棄本地更改,恢復到遠程倉庫的狀態,可以按照以下步驟操作: 獲取遠程最新版本 首先執行: git fetch origin這條命令會把遠程倉庫的最新提交拉取到你的本地,但不會自動合并到你的當前分支。 硬重置你的當前…

flutter doctor 信號號超時

報錯如下: :\Users\Administrator>flutter doctor Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.27.4, on Microsoft Windows [版本 10.0.22631.5189], locale zh-CN) [√] Windows Version (Installed versi…

【Linux】系統入門

【Linux】系統初識 起源開源 閉源版本內核內核編號 Linux的安裝雙系統(不推薦)WindowsLinuxvmware虛擬機vitualbox操作系統的鏡像centos 7/ubuntu云服務器租用 Linux的操作lsmkdir 文件名pwdadduser userdel -rrm文件名cat /proc/cpuinfolinux支持編程vim code.c./a.out 運行程…

mybatis-plus整合springboot與使用方式

注解 TableField(exist false)&#xff1a;表示該屬性不為數據庫表字段&#xff0c;但又是必須使用的。 整合springboot pom <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xs…

[第十六屆藍橋杯 JavaB 組] 真題 + 經驗分享

A&#xff1a;逃離高塔(AC) 這題就是簡單的簽到題&#xff0c;按照題意枚舉即可。需要注意的是不要忘記用long&#xff0c;用int的話會爆。 &#x1f4d6; 代碼示例&#xff1a; import java.io.*; import java.util.*; public class Main {public static PrintWriter pr ne…

GPU服務器聲音很響可以怎么處理

當GPU服務器運行時噪音過大&#xff0c;通常是由于高負載下散熱風扇高速運轉所致。以下是分步驟的解決方案&#xff0c;幫助您有效降低噪音并保持設備穩定運行&#xff1a; 一、排查噪音來源 定位聲源 ? 使用 聲級計 或手機分貝檢測APP&#xff0c;確定最大噪音位置&#xff0…

STM32平衡車開發實戰教程:從零基礎到項目精通

STM32平衡車開發實戰教程&#xff1a;從零基礎到項目精通 一、項目概述與基本原理 1.1 平衡車工作原理 平衡車是一種基于倒立擺原理的兩輪自平衡小車&#xff0c;其核心控制原理類似于人類保持平衡的過程。當人站立不穩時&#xff0c;會通過腿部肌肉的快速調整來維持平衡。平…

C#設計模式-狀態模式

狀態模式案例解析&#xff1a;三態循環燈的實現 案例概述 本案例使用 狀態模式&#xff08;State Pattern&#xff09; 實現了一個 三態循環燈 的功能。每點擊一次按鈕&#xff0c;燈的狀態會按順序切換&#xff08;狀態1 → 狀態2 → 狀態3 → 狀態1...&#xff09;&#xff…

Mac系統升級node.js版本和npm版本并安裝pnpm

1.升級node.js版本 第一步&#xff1a;查詢當前node.js版本 node -v第二步&#xff1a;清除node.js的緩存 sudo npm cache clean -f第三步&#xff1a;驗證緩存是否清空 npm cache verify第四步&#xff1a;安裝n工具&#xff0c;n工具是專門用于管理node.js版本的工具 su…

[net 5] udp_dict_server 基于udp的簡單字典翻譯(服務器與業務相分離)

目錄 1. 功能了解 1.1. 啥是 dic_server? 1.2. dic_server 的小目標 2. 基本框架 2.1. 基本文件框架 2.2. 業務與服務器解耦 -> 回調函數 3. 字典 3.1. 字典配置文件 3.2. 構建字典類 3.2.1. 字典類的基本成員 3.2.2. 字典類構造 3.2.2.1. 構造 3.2.2.2. 信息加…

七種驅動器綜合對比——《器件手冊--驅動器》

九、驅動器 名稱 功能與作用 工作原理 優勢 應用 隔離式柵極驅動器 隔離式柵極驅動器用于控制功率晶體管&#xff08;如MOSFET、IGBT、SiC或GaN等&#xff09;的開關&#xff0c;其核心功能是將控制信號從低壓側傳輸到高壓側的功率器件柵極&#xff0c;同時在輸入和輸出之…

EM儲能網關ZWS智慧儲能云應用(8) — 電站差異化支持

面對不同項目、種類繁多的儲能產品&#xff0c;如何在儲能云平臺上進行電站差異化支持尤為關鍵&#xff0c;ZWS智慧儲能云從多方面支持儲能電站差異化。 簡介 隨著行業發展&#xff0c;市場“內卷”之下&#xff0c;各大儲能企業推陳出新的速度加快。面對不同項目、種類繁多…

圖像預處理-色彩空間補充,灰度化與二值化

一.圖像色彩空間轉換 1.1 HSV顏色空間 HSV顏色空間使用色調&#xff08;Hue&#xff09;、飽和度&#xff08;Saturation&#xff09;和亮度&#xff08;Value&#xff09;三個參數來表示顏色 一般對顏色空間的圖像進行有效處理都是在HSV空間進行的&#xff0c;然后對于基本…