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 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,除非使用s-s-r)。生产版本应该不甚至包含 webpack 开发服务器,我会说在这种情况下这是一个错误。以上是关于React 应用程序错误:无法构造“WebSocket”:可能无法从通过 HTTPS 加载的页面启动不安全的 WebSocket 连接的主要内容,如果未能解决你的问题,请参考以下文章
React - 类构造函数错误中的 Typescript 默认值
为啥在类构造函数中使用 setState 方法时 React 会抛出错误?
构造函数中缺少分号(React + Spotify API)
对于 React JS,如何解决“未捕获的 TypeError:无法构造 'Comment':请使用 'new' 操作.....”?