React应用本地正常，局域网远程访问无法获取JSON服务器数据

这个问题我之前也碰到过，核心原因是你配置的API地址在局域网场景下不适用：

你在.env里设置了REACT_APP_API_URL=http://0.0.0.0:3001，但0.0.0.0是服务器端用来监听所有网络接口的特殊地址，并不是一个可以让客户端（浏览器）直接请求的有效地址。当局域网里的其他机器访问你的前端时，浏览器会尝试在自己的本地机器上找3001端口的服务，自然就加载不到数据了。

下面给你两种可行的解决方案：

方案一：用相对路径配合Proxy（推荐，更灵活） #

这种方式不需要硬编码IP，适配性更强：

1. 修改.env文件，将API地址改为相对路径：

REACT_APP_API_URL=/api

2. 保持代码里的请求逻辑不变（相对路径会自动适配当前访问的域名/IP）：

const menusUrl = process.env.REACT_APP_API_URL + "/menus";
export function getMenu(menuId) {
  return fetch(`${menusUrl}?id=${menuId}`)
    .then(handleResponse)
    .catch(handleError);
}

3. 调整package.json里的Proxy配置，指向你的本地API服务：

"proxy": "http://localhost:3001"

这样前端发起的所有/api开头的请求，都会自动通过代理转发到你的3001端口API服务，不管是本地访问localhost:3000，还是局域网访问你的机器IP:3000，都能正常获取数据。

方案二：硬编码服务器的局域网IP #

如果你不想用Proxy，也可以直接把API地址设置为服务器的真实局域网IP：

1. 先找到你的服务器机器的局域网IP：
   • Windows：打开命令提示符，输入ipconfig，找到“以太网适配器”下的“IPv4地址”（类似192.168.1.100）
   • Mac/Linux：打开终端，输入ip addr或ifconfig，找到对应网卡的inet地址
2. 修改.env文件：

REACT_APP_API_URL=http://192.168.1.100:3001

3. 确保你的API服务监听的是0.0.0.0:3001（这样才能接收局域网内的请求）

这种方式的缺点是如果你的服务器IP变动，需要重新修改配置，不如方案一灵活。

额外检查点 #

• 确认服务器机器的防火墙没有拦截3001端口，确保局域网内其他机器能正常访问你的机器IP:3001
• 如果不用Proxy的话，需要在API服务端配置CORS（跨域资源共享），允许前端所在的域名/IP访问

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