Angular无法连接Moonraker WebSocket但.NET可正常连接，求解决方案

浏览器的同源策略限制了从http://localhost:4200（HTTP协议、端口4200）直接连接不同源的WebSocket服务（ws://192.168.2.234/websocket，协议、IP均不同），而.NET客户端不受浏览器同源策略约束，所以能正常连接。

方案1：配置Moonraker服务器允许跨域 #

修改Moonraker的配置文件（通常为moonraker.conf），添加CORS相关配置：

[server]
cors_domains = http://localhost:4200
cors_allow_credentials = True

保存配置后重启Moonraker服务器，浏览器就会允许Angular应用建立WebSocket连接。

方案2：Angular开发环境配置代理（仅开发阶段适用） #

1. 在Angular项目根目录创建proxy.conf.json文件，内容如下：

{
  "/websocket": {
    "target": "ws://192.168.2.234",
    "secure": false,
    "ws": true,
    "changeOrigin": true
  }
}

2. 修改angular.json中的serve配置，指定代理文件路径：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名称:build",
    "proxyConfig": "proxy.conf.json"
  }
}

3. 调整Angular中的WebSocket连接地址为相对路径：

const newSocket = new WebSocket("/websocket");

4. 重启Angular开发服务器，请求会通过代理转发，绕过浏览器的同源限制。

如果Angular应用部署后与Moonraker服务器同域，或部署在Moonraker允许的CORS域名列表中，无需额外配置；若仍为跨域场景，需保持Moonraker的CORS配置生效。

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