解决 React Native Android 的 Unable to load script 报错

1. 问题

如果你在使用 React Native 和 Metro Bundler，同时使用 Proxyman 和 Charles Proxy 时，可能会遇到以下错误：

Unable to load script. Make sure you're either running Metro (run 'npx react-native start') or that your bundle index.android.bundle is packaged correctly for release.

无法加载脚本。请确认你正在运行 Metro（执行 'npx react-native start'），或确认 index.android.bundle 已正确打包用于发布。

出现该错误的原因是 Metro Bundler 尝试连接 10.0.2.2:8081，但 Proxyman 和 Charles Proxy 无法正确处理该请求。

2. ✅ 解决方法（推荐）

下载最新版 Proxyman。Metro 相关修复已从 Proxyman 5.9.0 开始包含在内，因此不再需要旧的 Beta 版本。
按照 Android 设置指南设置模拟器代理。如果 Metro 仍然无法加载，请将本地 Metro 地址添加到代理绕过列表中，使 Bundle 流量仅在模拟器与你的 Mac 之间传输。
修改代理设置后，重启 Metro 并重新加载应用。

适用于 Android 的 Proxyman 5.9.0，配合 React Native Metro Bundler 使用

3. 解决方法（不推荐）

手动将 Map Remote 工具从 10.0.2.2:8081 映射到 127.0.0.1:8081，即可解决该问题。
具体步骤如下：

打开 Proxyman → Tools 菜单 → Map Remote
使用以下配置创建新的映射：

Rule: http://10.0.2.2:8081
勾选 "Include all subpath"
选择 ANY Method
Protocol: http
Host: 127.0.0.1
Port: 8081
点击 Done

点击 Certificate 菜单 → Install for Android → Emulator → 点击 Override Emulator，即可自动设置代理并一键安装证书
重新加载 Metro Bundler
完成：不再出现 Metro Bundler 报错 ✅

4. Charles Proxy 的解决方法

与 Proxyman 类似，但你需要手动将 Map Remote 工具从 10.0.2.2:8081 映射到 127.0.0.1:8081。该工具位于 Tools 菜单 → Map Remote... 中。

5. 如何解密 Android 模拟器（React Native + Metro Bundler）的 HTTPS 请求/响应

打开 Proxyman → Certificate 菜单 → Install for Android → Emulator → 点击 Override Emulator，即可自动设置代理并一键安装证书

打开 Android Studio → Import → 选择项目中的 android 文件夹 → 等待 Android Studio 加载完所有依赖项
进入 app/src/main/res 文件夹 → 新建名为 xml 的文件夹 → 新建名为 network_security_config.xml 的文件
将以下代码添加到 network_security_config.xml：

<network-security-config>
  <debug-overrides>
    <trust-anchors>
      <!-- Trust user added CAs while debuggable only -->
      <certificates src="user" />
      <certificates src="system" />
    </trust-anchors>
  </debug-overrides>

  <base-config cleartextTrafficPermitted="true">
    <trust-anchors>
      <certificates src="system" />
      <certificates src="user" />
    </trust-anchors>
  </base-config>
</network-security-config>

打开 AndroidManifest.xml → 在 application 标签中添加以下代码：

android:networkSecurityConfig="@xml/network_security_config"

完成。尝试重新加载 Metro Bundler → 开始抓取 SSL 流量

6. 如何解密 iOS 模拟器（React Native + Metro Bundler）的 HTTPS 请求/响应

这比 Android 简单得多，因为 iOS 无需额外配置即可抓取模拟器的 HTTPS 流量

打开 Proxyman → Certificate 菜单 → Install for iOS → Simulator → 点击 Override Simulator，即可自动设置代理并一键安装证书

完成。尝试重新加载 Metro Bundler → 开始抓取 SSL 流量

下一步

如需在 iOS 真机上抓取 HTTPS 流量，可以参考此文档：如何使用 Proxyman 抓取 iOS 真机的 HTTPS 流量

10.0.2.2 仅适用于标准 Android 模拟器访问宿主 Mac。真机 Android 设备需要使用与 Mac 位于同一网络中的 Mac IP 地址。请将 network_security_config.xml 的配置限制在 Debug 构建中，不要让正式版应用信任所有用户添加的证书。

Noah Tran

2024年9月16日