You need to enable JavaScript to run this app. React Native用axios调API报Network Error,多方案尝试无效求助
优惠活动
大模型
产品
解决方案
定价
更多

React Native用axios调API报Network Error,多方案尝试无效求助

React Native 场景下Axios触发Error: Network Error的正确排查路径

你之前尝试的CORS跨域适配、package.json配置proxy、重装node_modules的操作,本质都是Web端开发场景的适配方案,React Native的网络运行逻辑和Web浏览器完全不同,这些操作从原理上就无法作用于RN的请求流程,也是多次排查没有结果的核心原因。

第一步:先排除设备和接口服务的基础连通性问题

  • 绝对不要在真机/模拟器上直接用localhost或127.0.0.1作为接口地址:这个地址在RN的运行环境里指向的是设备本身,不是你的开发机或远程接口服务
    • 安卓模拟器场景:需将接口地址替换为开发机的局域网IP,同时确认安卓9及以上系统的网络安全配置没有拦截明文HTTP请求
    • iOS模拟器场景:虽可直接访问开发机的localhost,但如果是真机调试,同样需要替换为开发机的局域网IP,且必须保证设备与电脑处于同一局域网下,没有被系统防火墙拦截服务端口
    • 验证连通性时不要只靠电脑端的Postman测试:Postman请求正常仅代表你的开发机和接口服务互通,不代表RN运行的设备和接口服务能正常通信,需在调试设备的浏览器中直接访问接口地址做交叉验证

第二步:排除请求配置本身的无效拦截

  • 检查Axios的全局配置:RN环境下Axios内置的proxy参数、httpsAgent配置完全不生效,错误设置这类参数会直接触发Network Error
  • 做交叉对照测试:把当前出问题的Axios请求替换为原生fetch接口发起,如果原生请求同样报Network Error,说明问题和Axios本身无关,无需在Axios的版本、配置上反复排查
  • 检查全局请求拦截器的逻辑:确认没有自动拼接错误的请求地址、添加无效的请求头,这类问题也会被网络层包装成通用的Network Error

第三步:排除平台系统层的安全策略拦截

  • 安卓端检查AndroidManifest.xml是否配置了基础网络权限<uses-permission android:name="android.permission.INTERNET" />,新初始化的RN项目经常遗漏该配置
  • iOS端检查Info.plist的应用传输安全(ATS)规则:如果你的接口是HTTP明文协议,没有配置对应的例外规则,系统会直接拦截请求并抛出Network Error
  • 如果调试时使用了抓包工具,需确认抓包工具的根证书已经安装到调试设备上,并且开启了证书信任,否则所有经过抓包工具转发的请求都会被系统判定为不安全,触发网络错误

高效排错技巧

  • 完善Axios的错误捕获打印逻辑:Network Error场景下error.response字段为空,需打印完整的error.code字段,不同的错误码可以直接定位是目标地址不可达、还是请求超时、还是被权限拦截
  • 无需优先尝试删除node_modules重装依赖:这类网络层报错90%以上和依赖包完整性无关,优先排查连通性和系统策略拦截,最后再考虑依赖版本兼容问题

内容的提问来源于stack exchange,提问作者Charbel Sarkis

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.11.03 17:15:08