解决Angular CLI代理WebSocket失败的问题

看到你碰到的ERR_NAME_NOT_RESOLVED错误，核心原因很明确：你直接用了ws://stream/connect这种绝对URL，浏览器会跳过Angular代理，直接去DNS查找不存在的stream域名，自然解析失败。结合你的场景，我整理几个关键修复步骤：

1. 修正WebSocket实例化的URL

不要用绝对URL，改用相对路径，这样请求才会走Angular的代理通道：

// 错误写法
// const socket = new WebSocket('ws://stream/connect');

// 正确写法
const socket = new WebSocket('/stream/connect');

浏览器会自动把相对路径拼接成当前开发服务器的地址（比如ws://localhost:4200/stream/connect），之后代理就会接手转发请求到后端。

2. 完善代理配置文件(proxy.conf.json)

你需要明确配置WebSocket的转发规则，尤其是开启ws: true标识这是WebSocket请求，同时指定后端服务的真实地址。示例配置如下：

{
  "/stream/*": {
    "target": "ws://你的后端WebSocket服务地址:端口",
    "ws": true,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

• "/stream/*"：匹配所有以/stream开头的请求，确保覆盖你的/stream/connect路径
• "target"：替换成你后端WebSocket服务的实际地址（比如ws://localhost:8080）
• "ws": true：告诉Angular代理这是WebSocket请求，启用对应的转发逻辑
• "changeOrigin": true：解决跨域问题，尤其当后端服务有主机校验时
• "logLevel": "debug"：开启代理日志，方便你在终端查看请求是否被正确转发

3. 验证代理是否生效

启动项目时确保代理配置正确加载：

ng serve --proxy-config proxy.conf.json

然后打开浏览器的开发者工具-网络面板，筛选WS类型的请求，查看请求地址是否是ws://localhost:4200/stream/connect；同时观察终端里的代理debug日志，确认请求是否被转发到你配置的后端地址。

额外排查点

• 确认后端WebSocket服务是否正常启动，端口和地址与代理配置完全一致
• 如果后端是HTTP而非HTTPS，不要在代理配置里加secure: true（默认是false，无需额外设置）
• 若你之前查看的issue涉及版本问题，检查Angular CLI版本是否为1.7+（这个版本及以后基本都稳定支持WebSocket代理，旧版本建议升级）

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