React Native使用fetch请求时报TypeError: Network request failed错误如何解决

报错原因 #

这个错误是RN的网络请求被底层拦截、无法正常完成的通用报错，常见触发原因如下：

• 明文HTTP请求限制：安卓9（API 28）及以上、iOS所有新版本默认禁止非HTTPS的明文HTTP请求，你当前使用的是http开头的局域网地址，会被系统默认拦截。
• 网络连通性异常：后端服务未正常启动、运行RN的设备（模拟器/真机）与后端服务所在设备不在同一局域网、防火墙拦截了3000端口的请求。
• 跨域或参数异常：后端接口未配置CORS跨域规则，预检请求被拦截；或传递的body参数格式不符合后端要求，接口直接拒绝连接。
• 网络权限未配置：安卓端未申请网络访问权限，iOS端请求局域网服务未申请本地网络权限。

修复方案 #

1. 配置明文HTTP请求白名单 #

• 安卓端：打开android/app/src/main/AndroidManifest.xml，在<application>标签中添加属性：

android:usesCleartextTraffic="true"

• iOS端：打开ios/你的项目名/Info.plist，添加如下配置放开HTTP请求限制：

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

生产环境建议替换为HTTPS证书，不要长期保留上述配置。

2. 排查网络连通性 #

• 先在后端所在设备的浏览器访问http://192.168.20.137:3000/posts，确认POST接口可以正常响应。
• 在RN运行设备的自带浏览器中访问上述地址，确认可以正常打开，若无法打开需要排查设备是否在同一局域网、是否开了代理/VPN、防火墙是否放开3000端口。

3. 修复跨域与参数问题 #

• 后端接口添加CORS跨域配置，允许POST请求与application/json类型的请求头。
• 确认JSON.stringify(memberID)的输出符合后端接口要求，若后端要求接收键值对格式，需要调整为JSON.stringify({memberId: memberID})这类格式。

4. 配置网络权限 #

• 安卓端在AndroidManifest.xml中添加网络权限：

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

• iOS端如果是访问局域网服务，需要在Info.plist中添加NSLocalNetworkUsageDescription权限声明，申请本地网络访问权限。

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