开启Android VPN时Expo React Native应用断连Metro的解决咨询

问题背景 #

使用Expo托管工作流（SDK 50）开发React Native应用，Windows 10系统，Android设备上开发构建正常，但开启Psiphon VPN后，应用与Metro服务器断连，无法正常加载。

错误详情 #

• 开启VPN后启动应用：直接弹出error loading app, connection reset，完全无法连接服务器
• 应用已连接服务器后开启VPN：控制台提示：

Cannot connect to the Metro.
Try the following to fix the issue:
Ensure that the Metro server is running and available on the same network
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to your machine's IP address and the port of the local dev server - e.g. 10.0.1.1:8081
URL: 192.168.1.4:8081

已尝试操作 #

• 启用USB调试并通过USB连接设备
• 执行adb kill-server & adb start-server
• 执行adb tcpip 5555
• 断开USB连接后执行adb connect <phone's IP>，成功提示connected to 192.168.1.3:5555
• 运行npx expo start --localhost --android时出错：[ADB] Couldn't reverse port 8081: adb.exe: error: more than one device/emulator

解决方案 #

1. 解决多设备冲突问题 #

出现more than one device/emulator错误是因为adb识别到多个设备（含之前的TCP连接或模拟器），按以下步骤处理：

• 执行adb devices查看所有连接的设备，记下目标设备的ID
• 指定设备执行端口转发：adb -s <设备ID> reverse tcp:8081 tcp:8081
• 指定设备启动Expo：npx expo start --localhost --android -d <设备ID>

2. 配置Metro监听所有网络接口 #

VPN会改变设备路由，默认Metro可能仅绑定特定网卡，修改配置让它监听所有接口：

• 在项目根目录创建或修改metro.config.js，添加如下内容：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.server.host = '0.0.0.0'; // 监听所有网络接口
config.server.port = 8081;

module.exports = config;

• 重启Metro服务器

3. 手动指定服务器地址 #

在Android设备的开发者菜单中设置：

• 摇一摇设备或按快捷键打开应用开发者菜单
• 选择Debug server host & port for device
• 输入电脑的局域网IP地址+端口（如192.168.1.4:8081，注意是本地网络IP，不是VPN分配的IP）
• 重启应用

4. 配置VPN绕过本地地址 #

Psiphon可能强制所有流量走VPN隧道，导致无法访问本地Metro服务器：

• 打开Psiphon设置，找到绕过VPN的地址或类似选项
• 添加电脑的局域网IP（192.168.1.4）和端口8081到绕过列表
• 保存设置后重启VPN和应用

内容的提问来源于stack exchange，提问作者mermaid