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

Question

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

Answer 1

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

yarn add serve 要么 npm i serve

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

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

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