JavaScript/React中如何动态获取宿主机IPv4地址

不需要额外写复杂逻辑探测宿主机IP，直接用浏览器原生的window.location对象就能拿到当前访问页面对应的宿主机地址，完全适配动态局域网IP场景，树莓派IP变动也不需要改代码。
具体实现方式：

• 构造axios请求地址时，通过window.location.hostname获取当前访问React页面对应的宿主机IP，拼接Flask服务的5000端口即可，示例代码：

// 生成Flask服务的基础请求地址
const API_BASE = `http://${window.location.hostname}:5000`

// 接口请求示例
axios.post(`${API_BASE}/your/endpoint`, { params: 'xxx' })

• 如果后续配置了反向代理（比如用Nginx把Flask服务代理到React服务同端口的/api路径下），连端口都不需要手动拼接，直接写相对路径/api/your/endpoint发请求即可，浏览器会自动将请求路由到当前页面对应的宿主机，完全不需要感知宿主机IP。

之前请求失败是因为你写死了localhost作为请求地址：localhost的解析是在访问端浏览器完成的，哪个设备打开页面，localhost就指向哪个设备本身。其他局域网设备访问树莓派上的React页面时，请求自然会发到访问设备自己的localhost上，而不是跑着Flask服务的树莓派。

• Flask服务启动时必须绑定0.0.0.0地址，不能用默认的127.0.0.1，否则同局域网其他设备就算拿到正确IP也无法访问5000端口，启动命令参考：

flask run --host=0.0.0.0 --port=5000

• 如果是用create-react-app等脚手架启动React开发服务，也需要加--host 0.0.0.0参数启动，否则同局域网设备可能无法访问3000端口的React页面。
• 如果后续给服务配置HTTPS，可以直接取当前页面的协议拼接地址，避免HTTP/HTTPS混合内容报错，写法更通用：

const API_BASE = `${window.location.protocol}//${window.location.hostname}:5000`

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