“SecurityError: 无法构造 'WebSocket': 可能无法从通过 HTTPS 加载的页面启动不安全的 WebSocket 连接。”答案

【问题标题】："SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS."“SecurityError: 无法构造 'WebSocket': 可能无法从通过 HTTPS 加载的页面启动不安全的 WebSocket 连接。”
【发布时间】：2020-04-20 11:05:55
【问题描述】：

我想用 Heroku 部署一个使用 Create-React-App 制作的非常小的应用程序（React + Node 服务器），一切都在本地运行，但在生产中，我收到以下错误消息：

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

我不明白这个错误，因为我只有 React App + Node Server 的样板，我没有使用 Web 套接字或任何东西，

我看到了一个有同样问题的主题（https://github.com/facebook/create-react-app/pull/8079#issuecomment-562373869），但我仍然收到错误

我的 Github 仓库：https://github.com/Versifiction/ofilms-test-heroku

我的站点已部署：https://test-ofilms-heroku.herokuapp.com/

【问题讨论】：

在 webpackHotDevClient.js 中也加入这一行 pathname: '/sockjs-node', slashes: true
@BabakYaghoobi ok 加上这个之后，我还需要做点别的吗？
删除 .cache 文件夹并重新构建您的产品
错误仍然在这里，疯了..
查看您的网站控制台错误！你可以看到这个：试图连接到不安全的 WebSocket 端点 'ws://test-ofilms-heroku.herokuapp.com/sockjs-node' 然后我确定你没有更新 webpackHotDevClient.js 文件：协议：窗口.location.protocol === 'https:' ? 'wss' : 'ws'，或者你的最后一个构建产品不在你的站点中

标签： node.js reactjs heroku websocket

【解决方案1】：

由于为您的 localhost 环境设置了代理目标，可能会出现上述问题。

在您的代码中找到代理目标 https://github.com/Versifiction/ofilms-test-heroku/blob/master/src/setupProxy.js

【讨论】：

我首先在 package.json 中添加了一个代理，但是当我这样做时，Heroku 说“Invalid Host Header”，所以我添加了这个由 Create-React-App create-react-app.dev/docs/proxying-api-requests-in-development 提供的代理文件用于请求具有相对路径的服务器..（ axios.get('api/message') 将针对 localhost:5000/api/message ）
如以下文档中所述
create-react-app.dev/docs/proxying-api-requests-in-development/… 如果您遇到无效主机标头错误要解决此问题，您可以在项目根目录中名为 .env.development 的文件中指定公共开发主机：如 HOST=test-ofilms-heroku.herokuapp.com
好的，但是我已经有了 .env 文件，会不会在这些 .env 之间产生冲突？