Question

我正在尝试使用带有Angular CLI的ng serve --proxy-config proxy.conf.json来代理websockets但是因为我收到此错误而无法使其工作：

WebSocket connection to 'ws://stream/connect' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED

以下是我实例化websocket和我的代理配置的方法：

// WebSocket instantiation
const ws = new WebSocket('ws://stream/connect');

// proxy.conf.json
"stream/**": {
  "target": "wss://someurl.com:443",
  "secure": false,
  "ws": true
}

我错过了什么吗？这似乎是可行的，但我不能让它正常工作！

这个已结束的问题https://github.com/angular/angular-cli/issues/6081对此stackoverflow answer没有帮助。

Answer 1

我明白了！如果它可以帮助任何人...

默认情况下，Angular CLI在port 4200上运行应用程序，代理正在侦听同一个端口...因此我应该这样做：

// websocket instantiation
const ws = new WebSocket('ws://localhost:4200/stream/connect');

// proxy.conf.json
"/stream/*": {
  "target": "https://someurl.com:443",
  "secure": false,
  "ws": true
}

localhost:4200构造函数中的硬编码WebSocket在每个已部署的环境中都不起作用，因为代理正在侦听的URL会有所不同......所以我想出了获取位置主机和协议动态地在WebSocket构造函数中使用它：

// set ws protocol when using http and wss when using https
const protocol = window.location.protocol.replace('http', 'ws');
// get location host
const host = window.location.host;
// websocket instantiation
const ws = new WebSocket(`${protocol}//${host}/stream/connect`);

和BAM ......瞧！

Answer 2

同时在 "target": "http:yourAppUrl:portToProxyTo" 文件中设置 "ws": true 和 proxy.config.js 的帮助是让我同时拥有 Web 套接字流和 ASP.Net Core 控制器。

{
    "/": {
        "target": "http://someurl.com:443",
        "secure": false,
        "ws": true,
        "logLevel": "debug"
    }
}

Angular CLI：使用proxy.conf.json的代理websocket

2 个答案: