Angular CLI中使用HTTPS开发时WebSocket连接失败的解决方案

问题背景

在使用Angular CLI进行本地开发时，许多开发者会选择启用HTTPS来提高开发环境的安全性。通过在angular.json中配置SSL证书，可以轻松实现这一目标。然而，当同时启用热模块替换(HMR)功能时，可能会遇到WebSocket连接失败的问题，导致HMR无法正常工作。

问题现象

开发者配置了如下angular.json设置：

"serve": {
  "options": {
    "ssl": true,
    "sslKey": "ssl/private.key",
    "sslCert": "ssl/certificate.crt",
    "port": 4200,
    "host": "localhost",
    "hmr": true,
    "liveReload": true
  }
}

启动应用后，控制台会显示以下错误：

WebSocket connection to 'wss://localhost:4200/' failed
[vite] failed to connect to websocket

根本原因分析

这个问题通常与SSL证书的配置有关。当开发者使用自签名证书时，可能会出现以下情况：

1. 浏览器不信任自签名证书，导致WebSocket连接被拒绝
2. 证书创建方式不正确，导致证书链不完整
3. 证书与域名不匹配，导致安全验证失败

解决方案

方法一：使用mkcert工具生成可信证书

1. 安装mkcert工具（Windows用户需要以管理员身份运行）：

   mkcert -install
   

2. 为本地开发环境生成证书：

   mkcert localhost 127.0.0.1 ::1
   

3. 使用生成的证书启动Angular开发服务器：

   ng serve --ssl --ssl-key localhost+2-key.pem --ssl-cert localhost+2.pem
   

方法二：确保证书创建正确

如果选择手动创建证书，请确保使用以下OpenSSL命令：

1. 生成私钥：

   openssl genpkey -algorithm RSA -out ssl/private.key
   

2. 生成证书签名请求：

   openssl req -new -key ssl/private.key -out ssl/csr.csr
   

3. 生成自签名证书：

   openssl x509 -req -in ssl/csr.csr -signkey ssl/private.key -out ssl/certificate.crt
   

验证解决方案

成功应用解决方案后，您应该能够：

1. 在浏览器中访问https://localhost:4200而不出现安全警告
2. 在开发者工具的Network选项卡中看到WebSocket连接状态为101（Switching Protocols）
3. 修改代码后，HMR能够正常工作，自动刷新浏览器

最佳实践建议

1. 对于团队开发，建议将mkcert创建的证书加入版本控制（仅限开发环境）
2. 在CI/CD流程中，为测试环境配置相同的证书设置
3. 定期更新本地开发证书（建议每6个月更新一次）

总结

在Angular开发中使用HTTPS和HMR时，确保使用受信任的证书是解决问题的关键。通过使用mkcert工具或正确创建自签名证书，可以避免WebSocket连接问题，保证开发流程的顺畅。这种方法不仅解决了当前问题，也为后续的团队协作和持续集成打下了良好基础。