React Native调用本地API获取数据失败问题求助

核心原因 #

你代码里用的http://127.0.0.1:8000/api/users是电脑的本地回环地址，但React Native模拟器/真机里的127.0.0.1指向的是设备自身，而非运行API服务的电脑，因此无法正常访问。

解决方案 #

1. 替换为正确的访问地址 #

根据你使用的设备类型，修改fetch的目标URL：

• 安卓模拟器：使用http://10.0.2.2:8000/api/users（安卓模拟器专属的电脑本地服务映射地址）
• iOS模拟器：可直接用http://localhost:8000/api/users，或电脑的局域网IP
• 真机（安卓/iOS）：必须使用电脑的局域网IP（例如http://192.168.1.105:8000/api/users），同时确保手机与电脑连接同一WiFi网络

2. 确认API服务的监听范围 #

确保你的API服务监听地址是0.0.0.0而非127.0.0.1，这样局域网内的设备才能访问到服务。比如在Django/Flask等框架中，启动服务时添加--host 0.0.0.0参数。

3. 修改后的代码示例 #

调整fetch部分代码：

useEffect(() => {
  // 替换为对应设备的正确地址
  fetch('http://10.0.2.2:8000/api/users')
    .then((response) => response.json())
    .then((json) => setData(json))
    .catch((error) => console.error(error))
}, []);

4. 额外排查项 #

• 检查电脑防火墙是否允许8000端口的入站连接，必要时临时关闭防火墙测试
• 真机测试时关闭电脑VPN（若开启），避免网络路由干扰
• 确认API服务无IP白名单限制，或把设备的局域网IP加入白名单

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