Реакция приложения на ошибку: не удалось создать 'WebSocket': небезопасное соединение WebSocket может быть не инициировано со страницы, загруженной через HTTPS

Я развертываю приложение React, но получаю странную ошибку при посещении страницы через https.

Когда я захожу на страницу через https, я получаю следующую ошибку:

SecurityError: Не удалось создать «WebSocket»: Небезопасное соединение WebSocket не может быть инициировано со страницы, загруженной по HTTPS.

Но когда я захожу на страницу через http, она работает отлично.

Проблема в том, что я не использую веб-сокеты, насколько я могу судить. Я искал код, чтобы увидеть, есть ли запрос к 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",
}

Это на самом деле прямо из создания реагирующего-приложения Docs

Вот более простое решение. Понизьте свой 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-dev-server для ускорения разработки. Он использует веб-сокеты для связи с клиентом и запускает горячую перезагрузку, когда обнаруживает изменения на диске.

Вероятно, вы только запускаете приложение в режиме разработки, поэтому, если вы развертываете его в производственной среде, вы должны запустить его, 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"

любой, кто борется с этой проблемой при развертывании героку, понизит ваш reac-scriptsмодуль до 3.2.0.

1. удалить package-lock.jsonфайл
2. удалить node_modulesпапку
3. заменить react-scriptsверсию на3.2.0
4. npm install все модули снова

Вам нужно ознакомиться с этой статьей на веб-сайте Create-React-App. В нем объясняется, как правильно развернуть приложение React, созданное с помощью Create-React-App, которое указывает на конкретный сборочный пакет для приложения React, mars / create-Reaction-app-buildpack, на Github, который вам понадобился при создании приложения Heroku.

https://create-react-app.dev/docs/deployment/#heroku

https://github.com/mars/create-react-app-buildpack

У меня была та же проблема с небезопасной проблемой веб-сокетов, которая возникает у всех здесь, поэтому я протестировал решение из статьи Create-React-App. Это решило проблему. Нет необходимости изменять node_module или что-либо еще.

Все, что вам нужно сделать, это использовать эту команду при создании приложения heroku из CLI в корне приложения React:

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

тогда:

git push heroku master

когда вы идете на свой сайт в Heroku. он будет работать, как и ожидалось, без какой-либо ошибки «небезопасный веб-сокет».

(Я не знаю, как добавить в него пакет сборки mars / create-реагировать-app ПОСЛЕ ТОГО, КАК вы уже создали / развернули в Heroku. Я еще не дошел до этой части.)

Представленное выше решение, по-видимому, решает проблему, которую команда create-реагирует на приложение для развертывания в Heroku.