React+Django项目同网跨设备访问时Axios获取后端数据失败求助

1. Axios请求地址错误 #

你的Axios请求用的是http://127.0.0.1:8000，这个地址是设备本地回环地址，手机访问时会指向自身（手机本身并未运行Django后端），自然无法连接到电脑上的后端服务。

解决：把请求地址改成你电脑的局域网IP（即你查到的192.xxx.xxx.xxx），修改后的代码如下：

const response = await axios.get(
         `http://192.xxx.xxx.xxx:8000/api/v1/whole_menu/${restaurantId}`
);

2. Django服务器未监听局域网IP #

Django默认启动时只绑定127.0.0.1，仅支持本地访问，其他设备无法通过局域网IP连接后端。

解决：启动Django时指定监听所有网卡，命令改为：

python manage.py runserver 0.0.0.0:8000

3. 电脑防火墙拦截端口 #

电脑的防火墙可能阻止了其他设备访问8000端口的请求，导致请求根本无法到达后端。

解决：

• 临时关闭防火墙测试是否恢复正常；
• 或者在防火墙中添加规则，允许8000端口的入站连接。

4. 验证步骤 #

完成上述修改后，先在手机浏览器直接访问http://192.xxx.xxx.xxx:8000/api/v1/whole_menu/[你的restaurantId]，如果能正常返回数据，说明后端服务已对外提供，再测试React应用即可。

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