You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

如何让同事访问我本地localhost:4200上的Angular应用?

解决同一WiFi下无法访问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.1192.168.0.1),找到无线设置里的AP隔离选项,把它关掉。

第五步:临时关闭主机安全检查(仅开发环境可用)

如果以上步骤都不行,可能是Angular的主机安全检查拦截了请求,你可以加--disable-host-check参数启动(注意:这个参数只适合开发环境,生产环境绝对不能用):

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

按上面的步骤走,应该就能解决问题啦!

内容的提问来源于stack exchange,提问作者Ar8itrator

火山引擎 最新活动