移动端本地预览站点时数据库信息无法显示如何解决

桌面端能正常访问、手机端只能加载静态前端的核心原因是请求链路在某一段被阻断，常见触发场景按概率从高到低排：

• 前端代码里写死了后端接口地址为localhost/127.0.0.1：桌面端浏览器访问时，localhost指向运行后端的本机，请求能正常送达；但前端资源加载到手机浏览器运行后，手机语境下的localhost指向手机设备自身，手机上没有运行后端服务，请求直接发往空地址自然拿不到数据。
• 后端服务默认绑定回环地址：多数后端框架启动时默认仅绑定127.0.0.1，仅响应本机发起的请求，直接拒绝局域网内其他设备（包括手机）的访问请求，表现为接口连接被拒绝。
• 跨域（CORS）限制：前端和后端端口不一致，即便IP相同也属于跨域请求，后端如果没有配置对应跨域允许规则，浏览器会直接拦截后端返回的响应，表现为请求发出去了但拿不到返回数据。
• 系统防火墙拦截：电脑系统的防火墙默认未开放后端端口的局域网入站权限，手机发起的请求直接被防火墙丢弃，表现为接口请求超时。
• 网络层不通：手机和电脑不在同一局域网（比如连接不同WiFi、电脑接有线网开启了网络隔离、任意一端开了全局VPN/代理），手机根本无法访问到电脑的对应端口。
• 额外说明：该问题和PostgreSQL数据库本身没有直接关系，数据库仅和本机运行的后端服务通信，不需要对手机端暴露，无需修改数据库监听配置。

按顺序操作即可，不需要额外部署服务：

• 先确认基础网络连通性：将手机和电脑接入同一WiFi/同一局域网，关闭两端的全局VPN、代理工具，Windows用户先将当前网络设置为「专用网络」（公用网络默认开启设备隔离）。先在手机浏览器直接访问http://[你电脑的局域网IP]:[后端服务端口]，如果能看到后端返回的接口提示/404页面，说明网络层连通；如果提示连接超时/拒绝，先处理后面的监听地址、防火墙配置。
• 修改后端服务监听地址：将后端服务的绑定地址从127.0.0.1改为0.0.0.0，允许服务接收所有网卡的传入请求。常见框架的修改方式：
  • Express/Koa（Node.js）：启动时传入host参数，示例app.listen(8080, '0.0.0.0')
  • Flask/FastAPI（Python）：启动时加host参数，示例app.run(host='0.0.0.0', port=8080)
  • Spring Boot：在application.yml/application.properties中添加配置server.address=0.0.0.0
    修改完成后重启后端服务。
• 开放防火墙端口权限：给后端服务的对应端口开放局域网入站规则：
  • Windows：打开「高级安全Windows Defender防火墙」，新建入站规则，选择端口类型，填入后端端口号，允许连接，仅勾选「专用网络」即可。
  • macOS：打开系统设置-网络-防火墙，在选项中允许后端程序接收传入连接。
  • Linux（ufw防火墙）：执行命令sudo ufw allow [后端端口]/tcp生效规则。
• 修改前端接口请求配置：把前端代码里写死的localhost/127.0.0.1后端基地址，替换为电脑的局域网IP+后端端口，比如电脑局域网IP为192.168.3.16、后端端口为8080，基地址就设为http://192.168.3.16:8080。如果觉得每次换网络要改IP麻烦，可以在前端开发服务里配置代理（比如Vite在vite.config.js的server.proxy字段配置、Webpack在devServer.proxy配置），将/api前缀的请求统一转发到后端地址，前端代码里只用写相对路径/api/xxx即可，不需要硬编码IP。
• 配置后端跨域规则：在后端服务中添加CORS配置，允许前端服务的源地址（比如http://192.168.3.16:5173）发起跨域请求，开放需要的请求方法、请求头；本地开发阶段临时调试可以设置为允许所有源，注意该配置仅限本地开发使用，正式上线请勿直接开放所有源。
• 验证效果：清除手机浏览器缓存，重新访问前端地址即可正常加载后端返回的数据。

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