Angular 5.0：使用Angular CLI代理WebSocket失败求助

看起来你在尝试用Angular CLI代理WebSocket连接到Kaazing的echo演示服务器时遇到了问题，我来帮你排查几个常见的坑，一步步解决：

1. 先确认代理配置是否正确加载 #

首先要确保你启动Angular项目时确实加载了代理配置文件，很多人会忽略这一步。你需要在启动命令中添加--proxy-config参数，修改package.json里的serve脚本：

"scripts": {
  "serve": "ng serve --port 5000 --host 0.0.0.0 --proxy-config proxy.conf.json"
}

或者直接在终端运行：

ng serve --port 5000 --host 0.0.0.0 --proxy-config proxy.conf.json

如果没加这个参数，你的proxy.conf.json根本不会生效。

2. 调整代理配置的路径匹配与Origin设置 #

你的现有代理配置可能存在两个小问题：路径匹配范围和Origin头。修改后的配置如下：

{
  "/stream": {
    "target": "ws://demos.kaazing.com/echo",
    "secure": false,
    "ws": true,
    "changeOrigin": true
  }
}

• 把/stream/*改成/stream：如果你的前端连接的是ws://localhost:5000/stream（不带后续路径），/stream/*的匹配规则会忽略这个请求；改成/stream可以精确匹配根路径，或者用/stream/**覆盖所有子路径。
• 添加changeOrigin: true：很多WebSocket服务器会校验请求的Origin头，这个参数会让代理请求的Origin模拟成目标服务器的域名，避免被服务器拒绝。

3. 确保前端WebSocket连接路径正确 #

前端代码里创建WebSocket实例时，必须指向代理后的本地路径，而不是直接连接目标服务器：

// 正确的写法（走代理）
const socket = new WebSocket('ws://localhost:5000/stream');

// 错误的写法（绕开代理，直接连目标服务器）
// const socket = new WebSocket('ws://demos.kaazing.com/echo');

连接后可以在浏览器开发者工具的Network标签里，查看WebSocket请求是否成功发起，以及是否有302重定向或者错误状态码。

4. 验证目标服务器是否正常 #

先排除目标服务器的问题，用工具直接连接ws://demos.kaazing.com/echo测试，比如用wscat（先通过npm install -g wscat安装）：

wscat -c ws://demos.kaazing.com/echo

如果能正常发送并收到回声，说明服务器是好的；如果连不上，那问题不在你的代理配置上。

5. 检查Angular CLI版本兼容性 #

部分旧版本的Angular CLI在处理WebSocket代理时存在bug，建议升级到稳定的新版本：

npm update @angular/cli

按照上面的步骤逐一排查，应该就能解决你的WebSocket代理问题了。

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