React中Fetch API获取的数据无法在同网移动设备显示的解决咨询

你的核心问题是Fetch请求里的localhost:8000在移动设备上指向的是设备自身，而非你的开发电脑，所以移动设备无法访问电脑上的后端服务。

解决步骤： #

1. 获取开发电脑的局域网IP地址

   • Windows：打开命令提示符，输入ipconfig，找到「无线局域网适配器 WLAN」下的IPv4地址（比如192.168.1.105）
   • Mac/Linux：打开终端，输入ifconfig（或ip addr），找到对应网络接口的inet字段值

2. 修改Fetch请求的URL
   把代码里的http://localhost:8000/destinations替换成电脑的局域网IP，比如：

   useEffect(() => {
       fetch('http://192.168.1.105:8000/destinations')
       .then(res => {
           if(!res.ok){
               throw Error('could not fetch the data for that resource');
           }
           return res.json();
       })
       .then(data => {
           console.log(data);
       })
       .catch(err => {
           console.log(err.message);
       })
   }, []);
   

3. 额外检查项

   • 确保后端服务监听的是0.0.0.0而非127.0.0.1：比如Node.js后端要写成app.listen(8000, '0.0.0.0')，这样才允许局域网内其他设备访问
   • 确认移动设备和开发电脑连接的是同一WiFi网络，且IP地址在同一网段（比如都是192.168.1.x）
   • 防火墙规则要允许私有网络访问8000端口：有些防火墙默认只允许本地访问，需要在入站规则里把「远程IP地址」设置为「本地子网」

完成以上步骤后，在移动设备上打开React项目的预览地址（通常是http://你的电脑IP:3000），就能正常获取数据了。

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