大家好！我是 unplugin-https-reverse-proxy 的作者。去年，我曾分享如何利用這一工具解決本地前端開發中的鑑權難題，讓開發者能在本地開發服務器上使用測試環境域名輕鬆調試需要登錄態的應用。通過搭建中間搭理服務器，unplugin-https-reverse-proxy 消除了手動複製 cookie 和修改 host 的繁瑣步驟，顯著提升了團隊協作開發的效率。
點擊閲讀 提升前端本地調試效率。
今天，我非常激動地宣佈，unplugin-https-reverse-proxy 正式升級至 2.0 版本！本次更新帶來了備受期待的新功能：全面支持移動端調試。從現在起，你可以在手機上無縫調試需要鑑權的本地開發服務，讓移動端開發變得更加高效便捷。
移動端調試的痛點
在前端開發中，特別是針對 H5 頁面或移動 Web 應用，最終測試往往需要在真實設備上進行。然而，當你的本地開發服務運行在電腦上（如 http://localhost:5173），如何讓手機訪問這一服務？更復雜的挑戰在於，當測試涉及登錄和權限功能時，如何在手機上覆用或模擬測試環境的鑑權信息？
傳統解決方法包括：
- 網絡穿透：調整電腦防火牆和網絡配置，使手機通過局域網 IP 訪問開發服務（如
http://192.168.1.x:5173）。 - 手動模擬登錄：在手機上重新執行登錄流程，或嘗試將測試環境的 cookie/token 導入手機瀏覽器（操作繁瑣且常不可行）。
- 抓包工具代理：藉助 Charles 或 Fiddler 等工具代理請求，修改請求/響應以模擬鑑權狀態，或導出 cookie 再導入手機瀏覽器。
這些方法不僅操作複雜，而且效率低下，對於頻繁需要移動端調試的場景而言，堪稱巨大負擔。
突破性解決方案
unplugin-https-reverse-proxy 2.0 延續了 1.0 版本的核心理念，通過反向代理和域名映射，徹底解決移動端調試難題。新版本內置強大的代理服務器 Caddy，將本地開發服務暴露於局域網中，並提供必要的證書和代理配置支持。手機可以通過代理訪問電腦上的開發服務，同時使用你配置的測試環境域名。
具體來説，只需在電腦上按 UHRP 指引配置目標測試域名（如 target: 'test.aaaa-test.com'），並在手機上完成簡單的代理和證書設置，即可在手機瀏覽器中直接訪問該測試域名，調試電腦上的本地服務。由於訪問的是同一域名，手機瀏覽器可以像正常訪問一樣處理該域名的 cookie，實現鑑權信息的無縫複用。
兩步完成移動端調試
在使用 unplugin-https-reverse-proxy 2.0 進行移動端調試前，請確保已按先前指引在項目中安裝並配置好 UHRP，且目標域名設置正確。
啓動服務
啓動開發服務器時，需以管理員權限運行：
# macOS
sudo -E npm run dev
# Windows
# 以管理員權限運行終端後，執行 npm run devUHRP 啓動後，終端將顯示類似以下輸出：
VITE v5.4.13 ready in 6674 ms
➜ Local: http://localhost:5173/
➜ Network: http://192.168.0.10:5173/
➜ press h + enter to show help
✔ update host success
ℹ Mobile device proxy access:
ℹ 1. Install certificate: scan the QR code and download the root.crt file,
ℹ then install it on your mobile device
┌───────────────────────────┬──────────────────────────────┐
│ target │ certificate │
├───────────────────────────┼──────────────────────────────┤
│ http://192.168.0.10:7601 │ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ │
│ │ qrcode │
│ │ █▄▄▄▄▄▄▄█▄▄▄██▄▄█▄█▄▄███▄▄█ │
│ │ │
└───────────────────────────┴──────────────────────────────┘
ℹ 2. Set proxy on mobile device (Available IPs: 192.168.0.10):7600
✔ ➜ run caddy reverse proxy success: https://test.aaaa-test.com/請留意新增的幾行信息，它們提供了 unplugin-https-reverse-proxy 啓動的移動端代理服務地址、端口及證書下載方式。
接下來，在手機上完成以下簡單配置：
證書配置
第一步：安裝並信任證書
為確保手機瀏覽器信任通過電腦代理訪問的 HTTPS 網站（因證書由 Caddy 本地生成），需將 Caddy 根證書安裝至手機並設置為信任。
- 使用手機自帶瀏覽器掃描輸出中的
Mobile Certificate QR 對應的 URL，通常為包含二維碼的網頁。 - 下載證書文件
root.crt。 -
根據手機操作系統指引完成安裝和信任：
- iOS：下載後，證書會出現在“設置” -> “通用” -> “VPN 與設備管理”。安裝後，需前往“設置” -> “通用” -> “關於本機” -> “證書信任設置”，手動開啓對該證書的信任。
- Android：下載後點擊文件安裝（可能需設置鎖屏密碼）。安裝後，證書通常位於“設置” -> “安全” -> “加密和憑據” -> “信任的憑據” -> “用户”中。
第二步：配置網絡代理
在手機 Wi-Fi 設置中，將當前連接網絡設為手動代理：
- 找到手機連接的 Wi-Fi 網絡。
- 點擊或長按該網絡，選擇“修改網絡”或“網絡詳情”等選項。
- 找到“代理設置”或“HTTP 代理”，選擇“手動”。
- 代理服務器主機名/IP 地址：輸入 UHRP 輸出的
Mobile Proxy 局域網 IP 地址（如192.168.x.x）。 - 代理服務器端口：輸入
unplugin-https-reverse-proxy 輸出的端口號（通常為7600）。 - 保存配置。
（可選）如果你的設備安裝有 clash，可以參考以下配置導入到 clash 中，實現一鍵切換代理。
port: 7891 # 指定不同端口，避免和主 Clash 衝突
socks-port: 7892 # SOCKS5 端口
proxies:
- name: "unplugin-https-reverse-proxy"
type: http
server: 192.168.0.10 # 根據局域網ip自行調整
port: 7600
proxy-groups:
- name: "Dev"
type: select
proxies:
- "unplugin-https-reverse-proxy"
- DIRECT # 回退直連
rules:
- MATCH,Dev # 或者可以自定搜索文檔僅針對部分域名進行代理完成上述步驟後，確保手機與電腦處於同一局域網內。打開手機瀏覽器，直接訪問 unplugin-https-reverse-proxy 配置中的 target 域名（如 https://test.aaaa-test.com/）。此時，手機的網絡請求將通過代理髮送至電腦上的 unplugin-https-reverse-proxy 服務，再由 caddy 轉發至本地開發服務器。由於訪問的是測試域名，手機瀏覽器將自動攜帶或接收該域名的 cookie，鑑權功能即可正常運作！
提高調試效率
如果需要移動端調試，可以在項目中安裝 vConsole 提高調試調試效率。或者推薦使用 unplugin-dingtalk 工具，它集成了 vConsole、chii 遠程調試 等開發工具，並支持調試 httponly 的 cookies，調試效率能進一步提高。
總結
unplugin-https-reverse-proxy 2.0 版本引入了強大的移動端調試支持，徹底消除了手機上本地鑑權調試的痛點。通過簡單的證書安裝和網絡代理配置，你可以在手機上直接訪問測試域名，利用已有鑑權信息，像桌面端一樣高效地進行調試。
這一功能顯著提升了前端跨端開發效率，尤其適用於需頻繁在真機上進行功能與鑑權聯調的場景。一次配置，全團隊（包括新成員）均可輕鬆複用，告別手動複製粘貼和複雜抓包工具的困擾。
如果你正為移動端調試的鑑權問題苦惱，強烈推薦嘗試 unplugin-https-reverse-proxy 2.0！
歡迎體驗並分享寶貴建議。更多信息請訪問項目主頁，也期待你點亮那顆閃爍的 🌟 支持我的工作！
