node.js - React 应用程序错误:无法构造“WebSocket”:可能无法从通过 HTTPS 加载的页面启动不安全的 WebSocket 连接
问题描述
我正在部署一个 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"
]
}
}
解决方案
对于等待补丁的反应脚本的人们:
对于 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
希望这个答案可以帮助您摆脱错误。
有关更多信息,请参阅此处`
此错误已在最新版本中修复。 点击这里查看源文件
推荐阅读
- network-programming - 在 NetLogo 中创建具有 *both-free 属性和集群的网络
- typescript - 如何修复'无法分配给部分
' 在子类方法中? - kubernetes - Google Cloud Kubernetes - 与 Cloudflare 的负载均衡器会话亲和性
- javascript - Swiper carousel IE11 错误:图像过度拉伸
- python - 如何使用 pandas 模块合并(即“concat”)100 多个 .csv 文件?
- javascript - 如何在 Javascript 中创建多维堆栈?
- c# - 当我使用drawing.printing打印pdf文档时,pdf文档存在字节不足
- ionic4 - 当我转到另一个页面并返回时,安装按钮消失
- mysql - MySQL / MariaDB 中的类型别名
- java - 如何将 Java 8 流从许多条目“缩小”到更少