React Native Android使用Charles SSL代理时无法连接Metro bundler怎么办？

核心问题原因 #

手动设置全局代理后，Android设备会将所有请求（包括本地Metro的请求）转发至Charles，但Charles默认不会处理本地局域网的请求，导致设备无法连接到电脑上的Metro服务。

具体修复步骤 #

1. 在Charles中添加忽略代理规则 #

打开Charles的 Proxy > Proxy Settings，切换到Exceptions标签页，添加你的电脑局域网IP（如192.168.x.x）、localhost、127.0.0.1，让Charles跳过这些地址的代理，允许设备直接访问Metro。

2. 配置Metro绑定局域网IP #

修改项目根目录的metro.config.js，添加server配置，让Metro监听电脑的所有网络接口：

module.exports = {
  server: {
    port: 8083,
    host: '0.0.0.0'
  },
  // 保留原有其他配置
};

3. 调整Android代理排除列表 #

在Android设备的代理设置中，找到不使用代理的地址选项，添加电脑局域网IP、localhost、127.0.0.1，确保设备访问Metro时不走Charles代理。

4. 验证网络连通性 #

在Android浏览器中访问http://[你的电脑IP]:8083，若能看到Metro的欢迎页面，说明网络正常；若无法访问，检查电脑防火墙是否开放8083端口的入站请求。

5. 重启相关服务 #

• 关闭并重新启动Charles
• 执行npx react-native start --reset-cache重启Metro Bundler
• 重新运行Android应用：npx react-native run-android

额外排查点 #

• 确认Charles的SSL证书已正确安装到Android设备（用于HTTPS请求调试）
• 确保电脑与Android设备处于同一WiFi局域网
• Android 10+设备需授予应用“安装未知应用”权限以完成Charles证书安装

内容的提问来源于stack exchange，提问作者Mr. Robot