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

【问题标题】：React app error: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPSReact 应用程序错误：无法构造“WebSocket”：可能无法从通过 HTTPS 加载的页面启动不安全的 WebSocket 连接
【发布时间】：2020-04-09 01:45:36
【问题描述】：

我正在部署一个 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"
    ]
  }
}

【问题讨论】：

标签： node.js reactjs

【解决方案1】：

有一个传输安全要求，因为您可能使用 https:// 请求页面

将ws:// 替换为wss://。

这表明您需要一个安全的 websocket 连接。

【讨论】：

【解决方案2】：

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

对于 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 中添加一个部署脚本来使用 serve:

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

然后

npm deploy or yarn deploy

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

更多信息请参考here`

此错误已在最新版本中修复。 Click here to see the source file

【讨论】：

我有同样的问题，所以我只需要在节点模块中编辑这个文件？
@Versifiction 是的。这必须在发布新的 react-sripts 补丁之前完成。
可能不应该手动修改node_modules，因为这些不会被提交到共享仓库
所以我遇到了同样的问题，我正在将我的应用程序部署到 heroku。我什至强行只提交了websocket文件并将其部署到heroku，但我仍然遇到同样的错误，有人可以解决这个问题吗？我唯一没有尝试过的是提交整个 node_modules 目录。
@TylerStrouth 是否有可能在 Heroku 中编辑节点模块？部署到 heroku 后，它会安装 package.json 中提到的包。这样，您在上述文件中所做的更改也会被覆盖。尝试在 heroku 中编辑节点模块内的文件。

【解决方案3】：

简单三步解决问题

在 package.json 中设置 "react-scripts": "3.4.0"
运行 [npm install]
再次部署到你的主机，这里我使用的是 Azure NodeJS App Services https://fila.azurewebsites.net/Location 和 http://fila.azurewebsites.net/Location

是的，react-script 3.2.0 版也可以，但是 react-scripts 3.3.0 只能使用 http 运行

祝你好运托马斯

【讨论】：

【解决方案4】：

在 heroku 部署中遇到此问题的任何人将您的 reac-scripts 模块降级为 3.2.0。

删除package-lock.json文件
删除node_modules文件夹
将react-scripts 版本替换为3.2.0
npm install所有模块再次

【讨论】：

【解决方案5】：

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

https://create-react-app.dev/docs/deployment/#heroku

https://github.com/mars/create-react-app-buildpack

我在每个人都遇到的不安全 websocket 问题上遇到了同样的问题，所以我测试了 Create-React-App 文章中的解决方案。它解决了这个问题。无需修改 node_module 或任何东西。

在 React 应用的根目录从 CLI 创建 heroku 应用时，您需要做的就是使用这个命令：

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

然后：

git push heroku master

当您在 Heroku 访问您的网站时。它将按预期运行，没有任何“不安全的 websocket”错误。

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

上述解决方案似乎解决了 create-react-app 团队部署到 Heroku 的问题。

【讨论】：

要在将 buildpack 部署到 Heroku 之后添加它，请转到 Heroku 应用页面->“设置”选项卡->“Buildpacks”部分。您添加 mers/create-react-app 然后单击“添加 Buildpack”按钮。

【解决方案6】：

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

yarn add serve 或 npm i serve

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

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

这实际上是直接来自 create-react-app docs

【讨论】：

这对我不起作用我在本地启动服务器时收到 404 错误
抱歉回复晚了，您需要为本地开发创建另一个脚本。例如。 "dev": "react scripts start" 您将运行 npm run dev 以在本地运行。

【解决方案7】：

这里有一个更简单的解决方案。将package.json 中的react-scripts 降级为3.2.0（我的是3.3.0）。

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

【讨论】：

为我工作。最初它一直恢复到 3.3.0，因为我在 npm install 完成后本能地运行建议的审计修复。

【解决方案8】：

在后面创建文件夹和node.js app
在应用的根目录中创建快速路由器
制作 server.js 文件

将此代码添加到 server.js 中

const express = require('express')
const path = require('path')
const app = express()

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use(express.static(path.join(__dirname, 'client/build')))
  // Handle React routing, return all requests to React app
  app.get('*', (request, response) => {
    response.sendFile(path.join(__dirname, 'client/build', 'index.html'))
  })
}
const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`API listening on port ${port}...`)
})

进入pakage.json

,
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && yarn && yarn run build"
  }

并将路由代理添加到 /folder-name-react-app/pakage.json

  "proxy": "http://localhost:8080"

【讨论】：

【解决方案9】：

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

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

【讨论】：

听起来不错，谢谢！我会尝试并告诉你它是否有效。
我遇到了完全相同的问题，我已经运行 npm run build 将其部署到 GitHub 页面但它不起作用，所以尝试 Heroku 我得到了上述错误，它适用于 HTTP如果我选择加载不安全的脚本。确保其安全并解决此错误的解决方案会很有帮助！
@Ganesha，那你做错了。你需要做一个npm run build并且只上传build目录中的内容。
react scripts 3.3.0 版本有问题。您可以在此处“github.com/facebook/create-react-app/pull/8079”找到详细文档。我降级了对脚本的反应 - 3.2.0，现在我没有收到任何错误
@monsterpiece，奇怪。这不是我测试时的结果，虽然我没有在heroku上测试，但在本地测试。可能环境是一个问题，因此最好明确提及它。 NODE_ENV=production npm run build，然后只上传build 目录到heroku（也就是说，build 将是你在webserver 上的webroot，不需要服务器上的node，除非使用ssr）。生产版本应该不甚至包含 webpack 开发服务器，我会说在这种情况下这是一个错误。