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中添加一个部署脚本以使用serve：

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

然后

npm deploy or yarn deploy

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

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

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

yarn add serve 要么 npm i serve

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

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

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

这是一个更简单的解决方案。将您的降级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回购的。

自从我开始react-scripts搞怪反应已经有一段时间了，但是如果我没记错的话，它是基于webpack构建的，所以它很可能使用webpack-dev-server来加快开发速度。它使用websockets以便与客户端通信以在发现磁盘上的更改时触发热重装。

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

• 在文件夹和node.js应用程序的后面创建
• 在应用程序的根目录中创建快速路由器
• 制作一个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"

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

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

您需要从Create-React-App网站上阅读此文章。它说明了如何正确部署使用“ Create-React-App”创建的React应用，该应用指向在创建Heroku应用时所需的Github上针对React应用的特定buildpack 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或其他任何东西。

您需要做的就是使用CLI从React应用的根目录创建heroku应用时使用以下命令：

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

然后：

git push heroku master

当您访问Heroku网站时。它会按预期运行，而不会出现任何“不安全的websocket”错误。

（在您已经创建/部署到Heroku之后，我不知道如何向其添加mars / create-react-app buildpack。我还没有涉及到这一部分。）

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