Angular 5新项目Firefox报[WDS] Disconnected!错误求助

哥们，这个问题我之前帮人排查过，本质是Webpack Dev Server（WDS）的WebSocket热重载连接在Firefox里因为安全策略或地址匹配问题被断开了——Chrome对本地自定义域名的限制更宽松所以没事，咱们一步步来解决：

1. 先确认本地hosts映射是否正确 #

你用example.com作为host启动服务，但首先得确保这个域名指向你的本地机器，不然Firefox会去访问真实的example.com服务器，肯定连不上本地的WDS：

• Windows：打开C:\Windows\System32\drivers\etc\hosts（需要管理员权限）
• macOS/Linux：打开/etc/hosts
• 添加一行映射：

  127.0.0.1 example.com
  

保存后刷新DNS（或者重启浏览器）再试。

2. 启动时指定--public参数强制WebSocket连接地址 #

Firefox对WebSocket的来源校验更严格，WDS默认可能会用内部地址生成连接，导致不匹配。启动服务时加上--public参数，明确告诉WDS客户端应该用哪个地址连接：

ng serve --host example.com --public example.com:4200

这个参数会让WDS生成正确的WebSocket连接地址，和你浏览器访问的地址保持一致，避免Firefox因为来源不匹配断开连接。

3. 临时调整Firefox的隐私保护设置 #

有时候Firefox的增强跟踪保护会拦截本地WebSocket连接，你可以临时关闭测试：

• 打开Firefox设置 → 隐私与安全
• 找到“增强跟踪保护”，临时切换为“标准”或者直接关闭
• 刷新页面看看错误是否消失

4. （临时测试用）关闭WDS的主机检查 #

如果上面的方法都不行，可以试试用--disable-host-check参数跳过WDS的主机校验（注意：这个参数只适合开发测试，绝对不能用于生产环境）：

ng serve --host example.com --disable-host-check

一般来说，前两步就能解决问题了，尤其是指定--public参数，这个是最常见的修复方案。

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