局域网无法访问Localhost：执行ng serve --host 0.0.0.0后跨设备访问失败

我之前也碰到过完全一样的情况——本机能访问192.168.1.1:4200，但同局域网设备连不上，好在8080端口的站点正常，说明局域网连通性没问题，问题大概率出在Angular的启动配置或者4200端口的权限上。给你几个具体的排查和解决步骤：

1. 补充Angular CLI的启动参数 #

有些版本的Angular CLI默认会限制主机访问，你可以尝试在启动命令里加上--allowed-hosts参数，允许局域网内的设备访问：

ng serve --host 0.0.0.0 --allowed-hosts all --port 4200

如果不想允许所有主机，也可以指定你的局域网IP：

ng serve --host 0.0.0.0 --allowed-hosts 192.168.1.1 --port 4200

另外，旧版本的CLI可能需要--disable-host-check参数来绕过主机检查，但这个参数在新版本里已经被--allowed-hosts替代了，优先用前者。

2. 检查本机防火墙是否放行4200端口 #

既然8080能访问，说明防火墙已经放行了8080，但4200可能没被允许：

• Windows：打开「Windows Defender防火墙」->「高级设置」->「入站规则」，新建规则，允许TCP协议的4200端口连接。
• macOS：打开「系统偏好设置」->「安全性与隐私」->「防火墙」->「防火墙选项」，添加终端应用或者直接允许4200端口的传入连接。
• Linux：用ufw工具快速放行端口：

  sudo ufw allow 4200/tcp
  

3. 确认4200端口没有被其他进程占用 #

有时候4200端口可能被其他程序占用，导致Angular实际没监听这个端口：

• Windows：打开命令提示符执行：

  netstat -ano | findstr :4200
  

  如果有结果，记下PID，然后在任务管理器里结束对应的进程。
• macOS/Linux：执行以下命令查看占用进程：

  lsof -i :4200
  

  用kill -9 <PID>杀掉占用进程，或者换个端口启动Angular：

  ng serve --host 0.0.0.0 --port 4201
  

4. 检查Angular项目的配置文件 #

打开项目根目录的angular.json，找到projects -> [你的项目名] -> architect -> serve -> options，确认host设置为0.0.0.0，port为4200：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "host": "0.0.0.0",
    "port": 4200,
    // 其他配置...
  }
}

如果这里的配置和启动命令冲突，可能会导致监听异常，尽量保持一致。

5. 测试端口的可达性 #

在局域网的其他设备上，先执行ping 192.168.1.1确认能通，然后用以下命令测试4200端口是否开放：

• Windows：用telnet（如果没开启，先在控制面板里启用）：

  telnet 192.168.1.1 4200
  

• macOS/Linux：用nc命令：

  nc -zv 192.168.1.1 4200
  

如果连接失败，说明端口还是被拦截，回到防火墙步骤重新检查；如果能连接上，刷新浏览器应该就能访问了。

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