前言
首先需要澄清一下，該篇文章並非標題黨。這裏介紹需要實現的效果是讓後臺工作人員不需要前端改動網絡請求基礎地址的前提下，使用前端代碼便於本地調試。
不好意思這裏說的可能有點繞了，待我給你簡單的說明一下你就明白了。
我們知道前端在對接後臺的時候都有這麼一個基礎地址，所有的後臺接口調用都是通過它：
let _baseURL = 'http://api.xxx.develop.com'
const service = axios.create({ // 創建 axios 實例
baseURL: _baseURL, // api base_url
timeout: 120000 // 請求超時時間
})
複製代碼
現在假設有這麼一個場景：
後臺和前端一起開發某個需求，前端童鞋比較勤(huo)勞(shao)已經開發完頁面並將代碼都部署到了公司的開發環境http://xxx.develop.com上。
此時後臺小哥哥A想找你對接接口，你會運行本地的前端項目，然後將配置中的_baseURL改爲同事A的IP地址(假設爲10.0.17.231:1001);
但同事B也開發完了想與你對接，你會怎麼做？
“稍等一下哈，小張現在在和我對接”
“要不你先自己用postman自測一下你的接口？”
好爲南啊，前端童鞋想做到雨露均沾啊，怎麼辦...
此時你多麼希望能把你的前端項目當成一個靜態的頁面，讓後臺小哥哥只要配置上自己的IP地址就可以查看前端頁面並進行本地調試，而不再需要前端開啓服務。
該篇文章就是針對以上這種情況提供一種簡單的方案，若還有更優的解決方案請評論區留言，一起學習一下
實現思路
- 利用瀏覽器的Local Storage將後臺的IP地址存儲在其中;
- 前端在網絡請求代碼層上做一些適配,判斷Local Storage中是否有指定的IP地址,若是有的話則使用該地址。
前端網絡請求適配
這裏我以使用axios爲例進行講解，你的代碼中可能存在這麼一段東西：
// request.js
let _baseURL = 'http://api.xxx.develop.com'
const service = axios.create({ // 創建 axios 實例
baseURL: _baseURL, // api base_url
timeout: 120000, // 請求超時時間
headers: { 'Content-Type': 'application/json' }
})
...
複製代碼
(request.js是項目中的網絡請求配置)
我們只需要將baseURL做一個簡單的適配就可以了,
定義一個setBaseURL的函數：
function setBaseURL () {
const webHost = localStorage.getItem('webHost') // 獲取瀏覽器本地存儲中Key爲webHost那一項的值
if (location.origin === 'http://xxx.develop.com' && webHost) { // 判斷當前的環境以及是否存在webHost
_baseURL = 'http://' + webHost // 將_baseURL重新賦值
}
return _baseURL
}
複製代碼
然後使用它：
// request.js
let _baseURL = 'http://api.xxx.develop.com'
function setBaseURL () {...}
const service = axios.create({ // 創建 axios 實例
baseURL: setBaseURL(), // api base_url
timeout: 120000, // 請求超時時間
headers: { 'Content-Type': 'application/json' }
})
複製代碼
這樣項目在生成axios實例的時候，就會判斷你當前的環境(假設你只想要在開發環境上這樣做),然後判斷瀏覽器的LocalStorage中有沒有需要指定的IP地址，從而返回新的_baseURL。
做好了這層適配之後，前端就可以將項目build之後放到服務器上，後臺小哥哥要使用的時候做一些配置就可以了。
注 這裏的webHost字符串並非爲固定寫法，你也可以寫成apiHost、host等等字段，只要和後臺約定好就可以咯。
後臺如何使用
後臺小哥哥在使用的時候只需要在瀏覽器上配置一下就可以了。
假設前端項目放到的是http://xxx.develop.com上
- 打開http://xxx.develop.com，並打開控制檯(window快捷鍵F12, Mac快捷鍵option＋command＋i);
- 找到Application下的Local Storage;
- 展開Local Storage, 找到當前網址的那一項;
- 在右邊添加Key爲webHost, Value爲後臺本地的IP地址(包括端口號)的鍵值對。
- 刷新一下頁面
如下圖：
配置完之後可能長這樣：
注
- webHost的拼寫;
- 填入的IP地址一定要帶上端口號
- 配置完之後刷新下頁面
- 該配置針對的只是你本機的瀏覽器
- 不想要本地調試的時候記得將這項配置清除，不然它會一直存在於你的瀏覽器中
- 若是想刪除這項配置只需要將Value設置爲空字符串, 或刪除這一項，如下圖
檢測是否配置成功
檢測是否配置成功只需要查看一下發送的網絡請求的Request URL是否已經改變就可以了。
還是打開控制檯，然後找到NetWork那一項，篩選一下只查看XHR的網絡請求
假設原來應該請求的地址爲http://api.xxx.develop.com
配置之後要請求的地址 10.0.17.231:1001
查看此時發起網絡請求是不是你配置之後的地址即可。
後語
該解決方案是前公司的前端大哥提供的，我只是將它寫成文章分享給大家，在這裏也要感謝前端大哥在職業道路上對我的幫助。
覺得有幫助的小夥可以點個支持一下
作者：LinDaiDai_霖呆呆
來源：掘金