如何穿透Mac防火墙，让iPhone访问Angular项目的Webpack Dev Server？

这种情况其实挺常见的，主要是Angular CLI默认的开发服务器配置加上Mac防火墙的限制导致的，我给你一步步拆解解决：

1. 调整Angular开发服务器的绑定设置 #

默认情况下，ng serve只会把服务绑定到localhost，只有本机能访问。你需要修改启动命令，让它监听所有网络接口：

ng serve --host 0.0.0.0 --disable-host-check

• --host 0.0.0.0：让dev server绑定到电脑的所有网络接口（包括WiFi），这样同一局域网的设备就能找到它
• --disable-host-check：关闭webpack-dev-server的host校验机制（开发环境下安全风险极低，外部设备访问必须开启这个，否则会被拦截）

2. 配置Mac系统防火墙允许连接 #

Mac的默认防火墙会阻止外部设备发起的连接请求，你需要手动授权Node.js（Angular CLI基于Node运行）接收外部连接：

• 打开「系统偏好设置」→「安全与隐私」→「防火墙」→「防火墙选项」（如果界面是锁定状态，先点击锁图标输入密码解锁）
• 在程序列表里找到Node.js或者ng（如果没找到，先运行上面的ng serve命令，防火墙会弹出提示，直接选择「允许」即可）
• 确保对应程序的权限设置为「允许 incoming 连接」

3. 用局域网IP而非电脑名称访问 #

电脑的注册名称可能存在DNS解析问题，直接用电脑的局域网IP访问更可靠：

• 打开Mac终端，输入命令查询WiFi的局域网IP：

ifconfig en0 | grep inet

找到类似inet 192.168.1.100的地址，这就是你的电脑在局域网里的IP

• 在iPhone的Safari地址栏输入http://你的局域网IP:4200，比如http://192.168.1.100:4200

额外排查点 #

• 确认iPhone和Mac连接的是同一个WiFi网络，避免一个连2.4G频段、一个连5G频段（部分路由器的双频隔离会导致设备无法互通）
• 如果装了第三方防火墙软件（比如Little Snitch），也要在软件里添加规则，允许Node.js通过4200端口接收连接
• 检查4200端口有没有被其他程序占用，终端输入lsof -i :4200，如果有占用就用ng serve --port 4201换个端口试试

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