React Native真机无法连接本地服务器，求助排查解决方法

• 确认网络环境一致性
  确保iPhone与Mac连接同一WiFi网络，不同网络下无法实现本地设备间的通信。获取Mac的正确内网IP：

  • Intel Mac：终端执行 ifconfig | grep inet，找到inet开头且不是127.0.0.1的地址
  • M系列Mac：终端执行 ipconfig getifaddr en0

• 检查服务器绑定地址
  确保Node服务器绑定0.0.0.0而非仅localhost/127.0.0.1，否则仅本地可访问：

  // 示例：Express服务器绑定0.0.0.0
  app.listen(8000, '0.0.0.0', () => {
    console.log('Server running on http://0.0.0.0:8000');
  });
  

• 修正info.plist配置
  当前配置仅针对特定IP，若IP变更需同步更新；开发环境可使用更宽松的ATS配置（仅开发用，上线需修改）：

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
      <key>NSAllowsLocalNetworking</key>
      <true/>
  </dict>
  

  修改后必须重启Xcode和真机/模拟器，否则配置不生效。

• 测试基础网络连通性

  • 用iPhone的Safari访问 http://[Mac内网IP]:8000，若无法访问，说明是网络层面问题，与App代码无关；若能访问，再排查App请求。
  • 用Xcode的Network Inspector查看App请求状态，确认是否存在超时、DNS解析失败或4xx/5xx错误。

• TRPC客户端配置与错误捕获

  • 确保TRPC客户端的baseURL为Mac内网IP+端口，例如 http://192.168.1.100:8000，iPhone的localhost指向自身而非Mac。
  • 添加错误捕获逻辑，打印请求日志到Xcode控制台：

    const client = createTRPCClient({
      links: [
        httpBatchLink({
          url: 'http://192.168.1.100:8000',
          async fetch(url, options) {
            try {
              const res = await fetch(url, options);
              console.log('TRPC响应状态:', res.status);
              return res;
            } catch (err) {
              console.error('TRPC请求失败:', err.message);
              throw err;
            }
          },
        }),
      ],
    });
    

• 排查iOS系统权限

  • 进入iPhone的「设置」→ 你的App →「蜂窝数据」，确认已开启网络访问权限。
  • 对比模拟器测试：若模拟器能正常访问，真机不行，重点排查真机WiFi连接或权限；若模拟器也不行，问题出在服务器或App代码配置。

• 修正Ngrok使用方式
  正确的Ngrok地址格式为 https://xxxx-xx-xx-xx-xx.ngrok.io（注意后缀为ngrok.io），启动命令为 ngrok http 8000，优先使用HTTPS地址避免ATS拦截。

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