大家好！我是 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，且目标域名设置正确。
启动服务
启动开发服务器时，需以管理员权限运行：
bash
# macOS
sudo -E npm run dev
# Windows
# 以管理员权限运行终端后，执行 npm run devUHRP 启动后，终端将显示类似以下输出：
dart
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 中，实现一键切换代理。
yaml
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！
欢迎体验并分享宝贵建议。更多信息请访问项目主页，也期待你点亮那颗闪烁的 🌟 支持我的工作！