带有不安全 websocket 的 PWA 到本地应用程序答案

【问题标题】：PWA with unsecure websocket to local application带有不安全 websocket 的 PWA 到本地应用程序
【发布时间】：2019-08-05 10:51:57
【问题描述】：

我正在努力理解 HTTP、HTTPS、WS 和 WSS。

我有一个托管在 HTTPS 端点上的 vue PWA。在该应用程序中，我尝试连接到在 HTTP 端点上托管 SignalR-hub 的本地 PC。

我正在使用@aspnetcore/signalr 打字稿包。在开发机器上一切正常，但是当我尝试使用 PWA 时，我收到以下错误：

Error: Failed to start the connection: SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

我的连接构建器如下所示：

this.signalRConnection = new HubConnectionBuilder()
      .withUrl(`http://${this.localIp}/${this.hubName}`, {
        skipNegotiation: true,
        transport: HttpTransportType.WebSockets
      })
      .configureLogging(LogLevel.Information)
      .build();

我正在努力实现的目标是否可能？

【问题讨论】：

我猜问题是 "托管在 HTTPS 端点上。在该应用程序中，我尝试连接到本地 PC，该 PC 在 HTTP 端点。” 尝试让本地 PC 运行“HTTPS”。
这确实是我走的路。两者现在都在 HTTPS 上运行。（还是）感谢你的建议。 @LGSon

标签： typescript websocket signalr-hub asp.net-core-signalr asp.net-core-3.0

【解决方案1】：

就像提到的错误，使用 HTTPS 来自站点的不安全 websocket 连接。确保您要连接的 websocket 服务器支持 WSS 协议，它应该是 wss://

【讨论】：

用wss:// 更改.withUrl(http://${this.localIp}/${this.hubName}` 行并不能解决问题。我得到WebSocket connection to 'wss://{ip}/{hubname}' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR。或者它是否也需要后端更改？
我刚刚查找了 HubConnectionBuilder 类。这是用于 HTTP/S 连接的。所以您输入的原始值可能是正确的。我不确定您在代码中的哪个位置设置 websocket 服务器的地址
我在哪里设置地址真的很重要吗？即使是硬编码的 ip/hubname 也会给出相同的结果。或者你到底在问什么？

【解决方案2】：

我最近不得不解决一个类似的问题。我最终得到了以下解决方案。我为我的本地 websocket 服务器创建了一个新的 A 记录，例如 ws.example.org，其中包含我本地网络中服务器的 IP 地址。然后我必须为此服务器添加 SSL 证书。为此，我使用 certbot 创建了手动证书（我的服务器未连接到 Internet，因此无法进行自动质询，但可以编写脚本）。最后，在安装证书后，我的 PWA 能够建立 wss 连接。

【讨论】：