调试React Native应用时控制台出现‘remote fetches not permitted’的解决方法

以下是几个可行的解决办法，按优先级尝试：

1. 开启Edge浏览器的远程资源获取权限 #

• 打开Edge，输入edge://flags/#allow-insecure-localhost，把Allow invalid certificates for resources loaded from localhost设为Enabled
• 再输入edge://flags/#enable-devtools-experiments，启用这个选项后重启浏览器
• 打开开发者工具（F12），点击右上角齿轮图标进入设置，找到Experiments标签，勾选允许远程调试/远程源地图获取的选项（不同版本表述可能有差异，找类似描述的选项即可）

2. 调整Metro配置生成本地源地图 #

• 打开项目根目录的metro.config.js，修改或添加sourceMap相关配置：

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
      sourceMap: {
        enabled: true,
        inlineSources: true,
      },
    }),
  },
};

• 重启Metro服务：npx react-native start --reset-cache

3. 确保设备与电脑同局域网并指定IP启动Metro #

• 确认调试设备（手机/模拟器）和电脑连接的是同一个WiFi网络
• 启动Metro时指定本地IP：npx react-native start --host 192.168.4.100（替换成你实际的电脑局域网IP）
• 在设备上重新加载应用（摇一摇设备或者按菜单键选择Reload）

4. 临时禁用源地图（应急方案） #

如果只是需要快速调试，可暂时关闭源地图：

• 启动Metro时添加参数：npx react-native start --no-sourcemap
• 这样虽然看不到原始源码的完整映射，但能正常设置断点调试编译后的代码，满足基本问题定位需求

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