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

Posted

技术标签:

【中文标题】React 应用程序错误:无法构造“WebSocket”:可能无法从通过 HTTPS 加载的页面启动不安全的 WebSocket 连接【英文标题】:React app error: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS 【发布时间】: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"
    ]
  

【问题讨论】:

【参考方案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 servenpm 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.jsonnode_modules (rm -rf package-lock.json node_modules),然后执行npm i。将新的 package.jsonpackage-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,除非使用s-s-r)。生产版本应该甚至包含 webpack 开发服务器,我会说在这种情况下这是一个错误。

以上是关于React 应用程序错误:无法构造“WebSocket”:可能无法从通过 HTTPS 加载的页面启动不安全的 WebSocket 连接的主要内容,如果未能解决你的问题,请参考以下文章

websock第一次连不上window

React - 类构造函数错误中的 Typescript 默认值

为啥在类构造函数中使用 setState 方法时 React 会抛出错误?

Android websock 应用

构造函数中缺少分号(React + Spotify API)

对于 React JS,如何解决“未捕获的 TypeError:无法构造 'Comment':请使用 'new' 操作.....”?