React Native fetch请求报Network request failed错误如何解决？

问题排查与解决方案 #

优先做错误定位 #

先修改请求的catch逻辑，打印完整错误信息，缩小问题范围：

.catch((error) => {
  console.error('请求完整错误：', error);
  console.error('错误描述：', error.message);
  console.error('错误码：', error.code);
});

也可以直接在手机浏览器访问你的API地址 https://hub.0000.com/users/User_Login.php，确认手机端本身可以正常访问该接口。

常见问题修复方案 #

• 网络权限配置缺失

  分别对应不同端检查配置：
  • Android端：确认 android/app/src/main/AndroidManifest.xml 中已添加网络权限：

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

    如果测试后发现是SSL证书验证不通过，可以临时在application节点添加配置跳过证书校验排查问题：

    <application
      ...
      android:usesCleartextTraffic="true"
      ...
    >
    

  • iOS端：确认 Info.plist 中已配置ATS规则允许该域名请求，可临时开启全局HTTP权限测试：

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

• 请求超时无兜底

  原生fetch没有默认超时逻辑，网络波动时会直接抛出网络错误，封装带超时的请求方法替换原有fetch：

  // 超时时间设为10秒，可自行调整
  const fetchWithTimeout = (url, options = {}, timeout = 10000) => {
    return Promise.race([
      fetch(url, options),
      new Promise((_, reject) => 
        setTimeout(() => reject(new Error('request timeout')), timeout)
      )
    ]);
  };
  

• SSL证书问题

  确认你的域名SSL证书为正规CA签发、证书链完整，不要使用自签证书，也不要在调试时开启未被系统信任的抓包代理，代理证书不受信任也会触发该报错。

• 后端请求校验限制

  你单独测试API时用的工具的请求头和应用内的fetch请求头存在差异，可对比两边的请求头参数，确认后端没有对User-Agent、Referer等字段做校验拦截。

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