React 应用程序错误：无法构建“WebSocket”：可能无法从通过 HTTPS 加载的页面启动不安全的 WebSocket 连接

Question

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

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

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

但是当我通过 http 访问页面时，它运行良好。

问题是据我所知，我没有使用 websockets。我搜索了代码，看看是否有对 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"
    ]
  }
}

Answer 1

对于等待补丁的反应脚本的人们：

对于通过 https 进行本地测试，您可以手动编辑

node_modules/react-dev-utils/webpackHotDevClient.js

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

protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

对于部署，请按照以下步骤操作：

npm install -g serve // This can be done locally too

npm run build

然后在你的 package.json 中添加一个部署脚本来使用服务：

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

进而

npm deploy or yarn deploy

希望这个答案可以帮助您摆脱错误。

有关更多信息，请参阅此处`

此错误已在最新版本的发行版中修复。 点击这里查看源文件

Answer 2

这里的很多答案确实解决了这个问题，但自从我问这个问题以来，我找到的最简单的方法是将 npm package serve添加到您的依赖项中。

yarn add serve 或者 npm i serve

然后用以下内容替换您的启动脚本：

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

这实际上直接出自 create-react-app文档

Answer 3

存在传输安全要求，因为您可能使用 https:// 请求该页面

ws://用。。。来代替wss://。

这表明您需要安全的 Websocket 连接。

Answer 4

这是一个更简单的解决方案。将你的降级react-scripts到3.2.0你的package.json（我的在3.3.0）。

您可能需要删除您的package-lock.json和node_modules( rm -rf package-lock.json node_modules)，然后执行npm i. 提交你的新的package.json和package-lock.json回购的。

Answer 5

我已经有一段时间没有搞过 React 了，但react-scripts如果我没记错的话，它是建立在 webpack 之上的，所以它很可能使用 webpack-dev-server 来加速开发。它使用 websockets 与客户端通信，以便在发现磁盘上的更改时触发热重载。

您可能刚刚在开发模式下启动应用程序，因此如果您将其部署到生产环境，您应该运行该命令，npm run build这将创建一组 javascript 文件，您可以使用您最喜欢的网络服务器来提供这些文件。