React / Neovis.js：无法构造“WebSocket”：可能无法从通过 HTTPS 加载的页面启动不安全的 WebSocket 连接答案

【问题标题】：React / Neovis.js: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPSReact / Neovis.js：无法构造“WebSocket”：可能无法从通过 HTTPS 加载的页面启动不安全的 WebSocket 连接
【发布时间】：2021-04-01 12:58:12
【问题描述】：

所以我有这个使用 Neovis.js 的反应应用程序，它是 Neo4j 数据库的图形可视化插件，它在开发中运行良好，但是当我将它部署到 Heroku 时，插件不起作用，它会在控制台：

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

还有这个：Mixed Content: The page at 'https://xxxxxxxx.com/person/20' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://xxxxxx:7687/'. This request has been blocked; this endpoint must be available over WSS.

我已经看到有关此错误的帖子，因此我将 package.json 中的 react-scripts 从 4.0.1 降级到 3.2.0，就像他们说的那样，但在那之后有太多不推荐使用的东西，整个应用程序没有在 Heroku 工作。

我还尝试将 webPackHotDevClient.js 第 62 行编辑为：protocol: window.location.protocol === 'https:' ? 'wss' : 'ws'，但仍然无法正常工作。

顺便说一句，neo4j 端点是在 Http 上而不是 https，我的 neo4j 端点应该可以通过 https 访问吗？

【问题讨论】：

标签： reactjs websocket neo4j

【解决方案1】：

编辑：

我发现自己的一个解决方案是使用http:// 而不是https:// 访问heroku 应用程序，以便我的react 应用程序中的插件可以与在http 上运行的neo4j 实例通信，这不是最佳答案，但它有效！

【讨论】：