如何让同事访问我本地localhost:4200上的Angular应用?
兄弟,我之前也碰到过一模一样的情况,别着急,咱们一步步来排查解决:
第一步:用正确命令启动服务,让同事访问你的本地IP而非localhost
首先得搞清楚:localhost是设备自身的回环地址,你同事输入localhost:4200其实是访问他自己的电脑,根本不是你的机器!
你需要用这条命令启动Angular服务:
ng serve --host 0.0.0.0 --port 4200
启动成功后,终端会显示类似这样的日志:
** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ or http://192.168.1.105:4200/ **
这里的192.168.1.105就是你的电脑在当前WiFi下的本地IP,让同事直接在浏览器输入这个完整地址(比如http://192.168.1.105:4200),别再用localhost了。
如果终端没显示你的IP,你可以手动查询:
- Windows:打开命令提示符,输入
ipconfig,找到无线局域网适配器 WLAN下的IPv4地址 - Mac/Linux:打开终端,输入
ifconfig(或ip addr),找到WiFi接口下的inet地址
第二步:检查你的电脑防火墙设置
大概率是防火墙挡住了外部设备的访问请求:
- Windows:打开「Windows Defender 防火墙」→「允许应用通过Windows Defender防火墙」,找到
Node.js或者ng.exe,确保勾选「专用」和「公用」网络权限 - Mac:打开「系统设置」→「网络」→「防火墙」→「防火墙选项」,找到
Node.js或Angular CLI相关进程,允许其接收传入连接
第三步:排查端口占用或换个端口试试
如果4200端口被其他程序占用,服务可能没真正监听该端口,你可以换个端口启动:
ng serve --host 0.0.0.0 --port 4201
然后让同事访问你的IP:4201
第四步:检查路由器的AP隔离功能
有些路由器默认开启了「AP隔离」(也叫「客户端隔离」),这个功能会阻止同一WiFi下的设备互相访问。你需要登录路由器后台(通常是192.168.1.1或192.168.0.1),找到无线设置里的AP隔离选项,把它关掉。
第五步:临时关闭主机安全检查(仅开发环境可用)
如果以上步骤都不行,可能是Angular的主机安全检查拦截了请求,你可以加--disable-host-check参数启动(注意:这个参数只适合开发环境,生产环境绝对不能用):
ng serve --host 0.0.0.0 --disable-host-check
按上面的步骤走,应该就能解决问题啦!
内容的提问来源于stack exchange,提问作者Ar8itrator




