React Native中Axios/Apollo请求本地服务出现Network Error问题排查

核心原因 #

React Native运行在模拟器/真机时，localhost指向的是设备自身，而非运行后端服务的开发机。浏览器中localhost指向开发机，因此能正常请求。

解决方案 #

1. 使用开发机的实际IP地址替换localhost #

• 获取开发机IP：
  • Windows：打开命令提示符，执行ipconfig，找到无线/有线网卡的IPv4地址
  • Mac/Linux：打开终端，执行ifconfig或ip addr，找到对应网卡的inet地址
• 修改Axios请求地址：
  在/news/index.tsx中，将http://localhost:3000替换为你的开发机IP：

  // 示例：假设开发机IP是192.168.1.100
  const response = await axios.get('http://192.168.1.100:3000/news?category=business');
  

• 修改Apollo Client配置：
  找到Apollo Client的初始化代码，替换uri中的localhost为开发机IP：

  const client = new ApolloClient({
    uri: 'http://192.168.1.100:4000/graphql', // 替换为你的Nest.js服务IP和端口
    cache: new InMemoryCache(),
  });
  

2. 确保开发机防火墙允许端口访问 #

开放Node.js服务的3000端口和Nest.js服务的对应端口，避免防火墙拦截请求。

3. 针对不同设备的特殊配置 #

• iOS模拟器：除了开发机IP，也可以使用http://localhost:3000或http://127.0.0.1:3000，但真机必须使用开发机IP。
• Android模拟器：可以使用http://10.0.2.2:3000（模拟器内置的开发机映射地址），或者直接使用开发机IP。

4. 验证后端服务绑定地址 #

确保Node.js和Nest.js服务绑定到0.0.0.0（允许所有网络接口访问），而非仅127.0.0.1（仅本地访问）。你的server.js中app.listen(PORT)默认绑定0.0.0.0，无需修改；如果Nest.js服务有指定绑定地址，确保改为0.0.0.0。

额外检查 #

• 确认开发机和运行React Native的设备/模拟器处于同一局域网（同一WiFi下）。
• 测试开发机IP是否能在设备浏览器中访问（比如在手机浏览器打开http://192.168.1.100:3000/news?category=business，看是否能返回数据）。

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