无法在移动设备打开本地主机部署的React(TypeScript)应用

排查方向及解决步骤 #

1. 服务器绑定地址限制 #

你的启动脚本里，服务器大概率默认只绑定了localhost（127.0.0.1），这种情况下只有本机或同局域网的电脑能连上，移动设备会被拒绝。

• 打开src/server/main.ts，找到服务器启动的代码（比如Express的app.listen），把监听地址改成0.0.0.0：

  app.listen(3000, '0.0.0.0', () => {
    console.log('Server running on http://0.0.0.0:3000');
  });
  

• 改完重启服务器，这样服务器会监听所有可用的网络接口，移动设备就能通过笔记本的局域网IP访问了。

2. 笔记本防火墙拦截 #

笔记本的防火墙可能挡住了移动设备对3000端口的请求。

• 检查Windows/macOS防火墙设置，允许你的Node.js应用通过防火墙，或者临时关闭防火墙测试是否能访问。
• Windows用户可以去「控制面板>系统和安全>Windows Defender防火墙>允许应用通过Windows防火墙」，找到你的Node程序，勾选「专用」和「公用」网络权限。

3. 网络环境不匹配 #

确认手机和笔记本连接的是同一个Wi-Fi（或者笔记本开热点让手机连），不同局域网下根本没法直接通过IP访问。

4. Vite配置调整（如果用Vite做开发服务器） #

如果你的应用是Vite托管的，需要在vite.config.ts里配置服务器监听地址：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',
    port: 3000
  }
});

配置完重启Vite服务，移动设备就能正常访问了。

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