访问托管在不同端口的 WebSocket 服务器时出现混合内容错误

Posted 2023-03-13

【中文标题】访问托管在不同端口的 WebSocket 服务器时出现混合内容错误

【英文标题】：Mixed Content error when accessing WebSocket server hosted in a different port

【发布时间】：2016-10-09 07:05:50

【问题描述】：

我已经在端口 80 (http) 和 443 (https) 上设置了带有 node.js 的 express 服务器。与该服务器分开，我在单独的端口8000 中设置了一个 websocket 服务器：

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer(port: 8000);

express 服务的站点必须连接到这些服务才能工作。问题是：通过http 访问我的网站工作正常，但是，从https，我得到：

index.js:100 Mixed Content: The page at 'https://example.com/' was 
loaded over HTTPS,  but attempted to connect to the insecure 
WebSocket endpoint 'ws://my_sites_ip:8000/'. This request has been 
blocked; this endpoint must be available over WSS.

为什么我会收到此错误？这与 websocket 服务器与 http 服务器位于不同的进程/端口这一事实有关吗？我怎样才能让它工作？

【参考方案1】：

错误告诉你该怎么做。使用 https 时将 websocket 与 wss 一起使用

看看这个帖子 html5 Websocket with SSL WebSocket 连接从 HTTP 或 HTTPS 握手开始。通过 HTTP 访问页面时，可以使用 WS 或 WSS (WebSocket secure: WS over TLS) 。但是，当您的页面通过 HTTPS 加载时，您只能使用 WSS - 浏览器不允许“降级”安全性。

【讨论】：

嗨，我必须在哪里使用 WSS？

您必须切换 URL 方案和端口。例如：wss://test.mosquitto.org:8081 而不是：ws://test.mosquitto.org:8080

这对于试图从 docker 容器内运行 Vue Vite HMR 模块的人来说非常有见地。