React Native真机POST请求Node服务器报Network request failed如何解决

问题根因排查与解决方案 #

1. 端口与网络连通性检查 #

• 确认Node服务监听地址为0.0.0.0:3001而非127.0.0.1:3001，仅绑定本地回环地址会导致同局域网的真机无法访问，修改服务启动配置将监听地址改为0.0.0.0
• 关闭开发机系统防火墙，或者在防火墙入站规则中放行3001端口
• 先在真机系统浏览器直接访问http://你的电脑IP:3001，如果无法正常打开说明是网络层连通性问题，和React Native代码无关

2. Android 配置补充 #

• 除了已添加的明文请求权限，还要确认AndroidManifest.xml中已申请基础网络权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

• Android 12及以上版本如果配置不生效，可以在res/xml目录下新建网络安全配置文件，明确允许对应IP的明文请求。

3. 请求代码优化 #

• 给fetch请求添加异常捕获逻辑，避免未处理的Promise rejection，同时打印更详细的错误信息方便定位：

fetch('http://MY_MACHINE_IPv4:3001/signup', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    fullName: fullName,
    email: email,
    phone: phone,
    password: pass,
  }),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.log('请求错误详情：', err));

• 确认你填写的MY_MACHINE_IPv4是和真机连接同一局域网的网卡IP，比如电脑连WiFi就不要填有线网卡的IP。

4. ngrok测试注意事项 #

• 使用ngrok测试时直接用生成的https前缀域名，不需要加端口号，不要使用http前缀的地址。
• 确认ngrok启动时绑定的是本地3001端口，启动命令为ngrok http 3001。

5. iOS真机适配（如果涉及iOS端） #

• 打开iOS项目的Info.plist，添加ATS配置允许明文请求：

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

内容的提问来源于stack exchange，提问作者mr.saraan