如何让局域网内其他设备访问我的Angular开发服务器？

当然可以！这在前端开发中是非常实用的需求，尤其是需要在不同设备上快速预览效果的时候。下面是具体的实现步骤：

1. 启动Angular服务器时绑定所有网络接口 #

默认情况下，Angular开发服务器只监听本地的127.0.0.1（也就是只能本机访问）。要让局域网内其他设备能访问，启动服务器时需要指定--host 0.0.0.0，这个参数会让服务器监听所有可用的网络接口：

ng serve --host 0.0.0.0

如果需要指定自定义端口（比如默认的4200被占用了），可以加上--port参数：

ng serve --host 0.0.0.0 --port 4201

2. 获取你的台式机局域网IP地址 #

你需要知道台式机在局域网内的IP地址，这样笔记本才能通过这个地址访问服务器：

• Windows：打开命令提示符，输入ipconfig，找到“以太网适配器”或“无线局域网适配器”下的IPv4地址，通常是类似192.168.x.x或10.x.x.x的格式。
• Mac/Linux：打开终端，输入ifconfig（Mac）或ip addr show（Linux），找到对应网络接口的inet地址，同样是局域网段的IP。

3. 在笔记本上访问Angular应用 #

打开笔记本的浏览器，输入以下格式的地址：

http://[你的台式机局域网IP]:[服务器端口]

举个例子，如果你的台式机IP是192.168.1.105，端口用的是默认的4200，那么输入http://192.168.1.105:4200就能看到你的Angular应用了。

可能遇到的问题及解决方法 #

• 防火墙阻止连接：Windows防火墙或Mac的系统防火墙可能会拦截这个端口的访问。你可以暂时关闭防火墙测试（不推荐长期关闭），或者在防火墙设置中添加规则，允许Angular开发服务器（ng serve对应的进程）通过防火墙。
• 出现“Invalid Host header”错误：这是Angular的安全机制在生效，防止未授权的主机访问。如果遇到这个问题，可以在启动命令中添加--disable-host-check参数（注意：仅在开发环境使用，生产环境绝对禁止）：

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

内容的提问来源于stack exchange，提问作者Ricardo Jesus Jarquin Perez