React Dev Build：Safari或任何移动浏览器的操作都不安全

问题描述

我有一个React应用。除了适用于Mac的Safari和任何移动浏览器外，该应用程序均可在所有地方正常运行。我在网上找到的所有解决方案都已过时，与我的版本无关。

我也尝试过使用浏览器列表，但也无济于事。我为webpackHotDevClient看到的变通办法已在我拥有的版本中实现。

SecurityError: The operation is insecure.
./node_modules/react-dev-utils/webpackHotDevClient.js
node_modules/react-dev-utils/webpackHotDevClient.js:60
__webpack_require__
/app/webpack/bootstrap:784

webpackHotDevClient.js：60

var connection = new WebSocket(
  url.format({
    protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',hostname: process.env.WDS_SOCKET_HOST || window.location.hostname,port: process.env.WDS_SOCKET_PORT || window.location.port,// Hardcoded in WebpackDevServer
    pathname: process.env.WDS_SOCKET_PATH || '/sockjs-node',slashes: true,})
);

package.json

{
  "name": "my-app","version": "0.1.0","private": true,"dependencies": {
    "3": "^2.1.0","-": "0.0.1","@fortawesome/fontawesome-svg-core": "^1.2.28","@fortawesome/free-brands-svg-icons": "^5.13.0","@fortawesome/free-regular-svg-icons": "^5.13.0","@fortawesome/free-solid-svg-icons": "^5.13.0","@fortawesome/react-fontawesome": "^0.1.9","@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.3.2","@testing-library/user-event": "^7.1.2","bootstrap": "^4.5.0","classnames": "^2.2.6","jquery": "^3.5.1","node-sass": "^4.14.1","react": "^16.13.1","react-dom": "^16.13.1","react-router-dom": "^5.2.0","react-scripts": "3.4.1","reactstrap": "^8.4.1","typescript": "^3.9.5","yargs-parser": "^18.1.3"
  },"scripts": {
    "start": "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 --version 6.14.5

解决方法

检查您使用的证书是否受信任。 Safari无法在未明确信任证书的情况下建立wss：//。

,

我刚刚遇到了同样的错误，在我的情况下，因为定义了 Content-Security-Policy，我不得不向 connect-src 部分添加另外两个条目：ws://localhost:3000/ 和 {{1} }.

如果您使用不同的端口，您必须用正确的端口号替换上面的端口号。

请注意，这是对 webpackHotDevClient 修复的补充。