手机访问电脑上的 dev 服务

很多时候我们在电脑上起了一个 dev 服务，需要在手机上进行测试。下面是可能遇到的问题和解决办法

（以下假定 dev 服务在 3000 端口，电脑局域网 IP 为 192.168.x.x）。

一

一般情况下，手机和电脑在同一个局域网内，手机可以通过电脑的 IP 地址访问 dev 服务。

手机直接访问 http://192.168.x.x:3000 就能访问电脑上的 dev 服务。

二

有时候，服务需要安全上下文（https 或者 localhost），直接使用一的方式访问会报错。

这时候，我们有以下两种解决办法：

电脑起 https 服务

电脑起 https 服务, 手机访问 https://192.168.x.x:3000

使用 adb reverse

使用 adb reverse 把手机的端口映射到电脑的端口。（需要手机开启调试模式）

adb reverse tcp:3000 tcp:3000

手机访问 http://localhost:3000 就能访问电脑上的 dev 服务。

如果 dev 服务接入了某些第三方服务，限制了 origin, 那前一种方式就不行了，只能使用这种了。

三

一般来说，前两种可以解决绝大部分问题。可是有时候情况比较特殊，以下是我碰到的问题：

我的项目在 wsl 中，vscode 通过 Remote - WSL 插件连接到 wsl, 运行 dev 服务，vscode 把端口转发给 windows 主机，这时候我用手机访问 http://localhost:3000 还是不行。

我问 gpt, gpt 说这样可以，但是我实际使用就是不行。

最后，我在 windows 上额外做了一层转发：

• 手机访问网址 http://localhost:3000
• windows 上执行 adb reverse tcp:3000 tcp:3001, 把手机 3000 转发到本地 3001
• windows 上监听 http://127.0.0.1:3001 , 转发到 http://localhost:3000

  这就是我做的额外一层转发

• wsl 运行 dev 服务，端口 3000

这样就 OK 了。

p.s. 如果手机 root 了，那就更方便了，可以修改 host，就不展开了。

以下是广告。

三中的端口转发可以使用我的转发工具 ssl-proxy：

npx @zimi/ssl-proxy -s http://127.0.0.1:3001 -t http://localhost:3000 -w -f -l