vue项目中访问websocket时报错了

DOMException: Failed to construct 'WebSocket':An insecure WebSocketcornection may not be initiated from a page loaded over HITPS.

这个 DOMException 错误是因为尝试在通过 HTTPS 加载的页面上初始化一个使用不安全的 "ws://" 协议的 WebSocket 连接。根据现代浏览器的安全策略，如果页面是通过 HTTPS 加载的，那么所有的网络请求，包括 WebSocket 连接，也必须是安全的。这意味着 WebSocket 连接必须使用 "wss://" 协议，而不是 "ws://"。

解决方案

1. 更改 WebSocket URL 使用 "wss://" 协议：

   • 这是最直接和推荐的解决方案。确保你的 WebSocket 服务器支持 SSL/TLS，然后将 WebSocket 的 URL 从 "ws://" 改为 "wss://".

2. 使用插件或特定设置允许不安全的内容：

   • 在某些开发场景中，如果暂时无法配置 SSL/TLS，可以使用浏览器的特定设置来允许不安全的内容。例如，在 Firefox 中，可以通过访问 about:config 并设置 network.websocket.allowInsecureFromHTTPS 为 true 来允许从 HTTPS 页面加载不安全的 WebSocket。
   • 在 Chrome 和 Edge 中，可以点击地址栏左侧的锁形图标，进入“站点设置”，找到“不安全内容”选项，并将其设置为“允许”。

3. 使用本地开发工具的特定插件：

   • 如果你使用的是像 Tauri 这样的框架，可以考虑使用 WebSocket 插件或 localhost 插件，这些插件可能允许连接到非安全的服务器。

注意事项

• 在生产环境中，始终推荐使用 "wss://" 协议来确保数据传输的安全性。
• 修改浏览器设置以允许不安全的内容只应在开发过程中使用，并且要在完成开发后恢复默认设置，以避免安全风险。