Node.js React应用程序错误：无法构造'；WebSocket'；：不能从通过HTTPS加载的页面启动不安全的WebSocket连接

我正在部署React应用程序，但当我通过https访问页面时，遇到一个奇怪的错误

当我通过https访问页面时，我收到以下错误：

SecurityError:构造“WebSocket”失败：可能无法从通过HTTPS加载的页面启动不安全的WebSocket连接

但是当我通过http访问页面时，它工作得非常好

问题是，据我所知，我没有使用WebSocket。我搜索了整个代码，以查看是否有对http的请求应该是对https的请求，或者是对ws:的请求，而不是对wss:的请求，但我没有看到任何内容

以前有人碰到过这个吗

我包括package.json文件的副本。 如果您需要我上传代码的任何其他部分以帮助调试，请告诉我

提前谢谢

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "baffle": "^0.3.6",
    "cross-env": "^6.0.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-player": "^1.14.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "react-typist": "^2.0.5",
    "webpack-hot-dev-clients": "^2.0.2"
  },
  "scripts": {
    "start": "cross-env react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

---

我已经有一段时间没有在react上乱搞了，但是如果我没有弄错的话，

react脚本

是建立在webpack之上的，所以它很可能使用webpack dev server来加速开发。它使用WebSocket与客户端通信，以便在发现磁盘上的更改时触发热重新加载

您可能只是在开发模式下启动应用程序，因此如果要将其部署到生产环境中，您应该运行

npm run build

，这将创建一组javascript文件，可以与您喜爱的Web服务器一起使用。

• 在文件夹和node.js应用程序的背面创建
• 在应用程序的根目录中创建express router
• 创建一个server.js文件

将此代码添加到server.js中 转到pakage.json 并将路由代理添加到/folder name react app/pakage.json中

---

对于等待修补程序的react脚本的用户：

对于https上的本地测试，您可以手动编辑

node_模块/react dev utils/webpackHotDevClient.js

以下是您在该文件第62行需要的代码：

protocol:window.location.protocol==='https:'？'wss'：'ws'，

对于部署，请遵循以下步骤：

npm安装-g serve//这也可以在本地完成
npm运行构建

然后在您的package.json中添加一个用于serve的部署脚本：

“脚本”：{
“部署”：“服务-s构建”，
}

然后

npm部署或纱线部署

希望这个答案能帮助你摆脱错误

有关更多信息，请参阅`

此错误已在最新版本中修复。

---

这里有一个更简单的解决方案。将

package.json中的
react脚本降级为
3.2.0
（我的是
3.3.0
）

您可能需要删除
package-lock.json
和
node_模块
（
rm-rf package-lock.json node_模块
），然后执行
npm i
。将新的
package.json
和
package lock.json
提交到repo中。
这里的许多答案确实解决了这个问题，但我发现的最简单的方法是将npm包添加到依赖项中

纱线添加发球
或
npm我发球

然后将开始脚本替换为以下内容：

"scripts": {
    "start": "serve -s build",
}

这实际上是CreateReact应用程序的直接内容，您需要从CreateReact应用程序网站上查看这篇文章。它解释了如何正确部署使用“Create React app”创建的React应用程序，该应用程序指向在Github创建Heroku应用程序时所需的React应用程序的特定构建包mars/Create React app buildpack



我在这里遇到了每个人都遇到的不安全websocket问题，所以我测试了CreateReact应用程序文章中的解决方案。它解决了这个问题。无需修改node_模块或任何内容

从React app根目录下的CLI创建heroku app时，只需使用以下命令：

heroku create --buildpack mars/create-react-app

然后：

当你访问Heroku的网站时。它将按预期运行，不会出现任何“不安全websocket”错误

（在你已经创建/部署到Heroku之后，我不知道如何将mars/create-react-app-buildpack添加到其中。我还没有谈到这一部分。）

上述解决方案似乎解决了create react app团队在部署到Heroku时遇到的问题。
在Heroku部署中遇到此问题的任何人都可以将您的
reac脚本
模块降级到
3.2.0

删除
包锁.json
文件
删除
节点\u模块
文件夹
将
react脚本
版本替换为
3.2.0
npm再次安装所有模块

通过三个步骤简单地解决问题

在package.json上设置“react scripts”：“3.4.0”
运行[npm安装]
再次部署到您的主机，这里我使用Azure NodeJS应用程序服务
及

是的，react脚本版本3.2.0也可以，但react脚本3.3.0仅使用http运行

祝你好运
托马斯：听起来不错，谢谢！我会尝试一下，让你知道它是否有效。我遇到了完全相同的问题，我运行了npm run build将其部署到GitHub页面，但它不起作用，所以我尝试了Heroku，但我得到了上述错误，如果我选择加载不安全的脚本，它会在HTTP上工作。解决方案，使其安全，并使这个错误得到解决将是有益的@甘尼莎，那你做错了。您需要执行
npm run build
并仅上载
build
目录中的内容。react scripts 3.3.0版本存在问题。您可以在此处找到详细的文档“”。我将react-to-scripts-3.2.0降级，没有收到任何错误now@monsterpiece真奇怪。这不是我测试的结果，虽然我没有在heroku上测试，但是在本地测试。环境可能是一个问题，所以它可能总是bes
  "proxy": "http://localhost:8080"

"scripts": {
    "start": "serve -s build",
}

heroku create --buildpack mars/create-react-app

git push heroku master