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

问题描述

我正在部署React应用，但是当我通过https访问页面时遇到一个奇怪的错误.

I am deploying a React app but am getting a strange error when I visit the page over https.

当我通过https访问页面时，出现以下错误:

When I visit the page over https I receive the following error:

SecurityError:无法构造"WebSocket":可能无法通过HTTPS加载的页面启动不安全的WebSocket连接.

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

但是当我通过http转到该页面时，它的运行效果非常好.

But when I go to the page over http it works perfectly.

问题是，据我所知，我没有使用websockets.我在代码中进行了搜索，以查看是否有对http的请求，应该是https或ws:而不是wss:的请求，但是我什么都没看到.

The problem is I'm not using websockets as far as I can tell. I searched through the code to see if there is a request to http that should be to https or to ws: instead of wss: but I don't see anything.

以前有人遇到过吗?

我包括package.json文件的副本.让我知道是否需要我上载任何其他代码来帮助调试.

I am including a copy of the package.json file.Let me know if you need me to upload any other parts of code to help debug.

谢谢.

{
  "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"
    ]
  }
}

推荐答案

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

A lot of answers here do actually solve the issue but the simplest way I have found since I asked this question is to add npm package serve to your dependencies.

yarn add serve或npm i serve

，然后将启动脚本替换为以下内容:

and then replace your start script with the following:

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

这实际上是从create-react-app docs

This is actually straight out of the create-react-app docs

这篇关于React应用错误:无法构造"WebSocket":可能无法通过HTTPS加载的页面启动不安全的WebSocket连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！