本地站点监听localhost时跨设备通过IP访问点击功能异常

相关场景截图 #

故障原因 #

该问题由两个核心配置错误导致：

1. 站点服务仅绑定了localhost（127.0.0.1）回环地址，该地址仅支持本机访问，服务未监听本机局域网网卡对应的IP端口，局域网其他设备发起的请求无法被站点服务正常接收。
2. 前端页面代码中写死了接口请求地址为localhost，局域网设备访问站点时，交互触发的请求会发送到访问者自身的localhost，而非部署站点的设备，因此得不到预期响应。

修复步骤 #

• 修改服务监听配置：将绑定地址从127.0.0.1改为0.0.0.0（监听本机所有网卡地址），也可直接绑定你本机的局域网静态IP，不同运行环境的常见修改方式如下：
  • 前端Node框架（Vite/Vue-cli/Create React App）：启动命令添加host参数，例如vite --host 0.0.0.0、vue-cli-service serve --host 0.0.0.0，Create React App可在启动命令前添加环境变量HOST=0.0.0.0 npm start
  • Nginx部署：修改Nginx配置文件中对应站点的listen规则，将listen 127.0.0.1:端口号;改为listen 0.0.0.0:端口号;后重载配置即可
  • 后端服务：Flask启动时设置app.run(host='0.0.0.0')，Django启动命令为python manage.py runserver 0.0.0.0:端口号，SpringBoot在application配置文件中添加server.address=0.0.0.0
• 调整前端请求配置：不要写死localhost作为请求域名，推荐使用相对路径，或者通过window.location.host动态获取当前访问的域名拼接请求地址，适配不同访问场景。
• 检查防火墙规则：确认部署站点的设备防火墙开放对应端口的局域网访问权限，避免防火墙拦截局域网设备的访问请求。

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