Реакція помилки програми: Не вдалося сконструювати "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-сервер для прискорення розвитку. Він використовує веб-розетки для того, щоб спілкуватися з клієнтом, щоб викликати гаряче перезавантаження при виявленні змін на диску.

Ви, ймовірно, тільки запускаєте програму в режимі розробки, тому, якщо ви розгортаєте її у виробничому середовищі, вам слід запустити, 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. Він пояснює, як правильно розгортати додаток React, створений за допомогою "Create-React-App", який вказує на конкретний збірний пакет для програми React, mars / create-react-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-react-app buildpack до неї ПІСЛЯ ви вже створили / розгорнули в Heroku. Я ще не отримав цю частину.)

Наведене вище рішення, здається, вирішує проблему, яку має команда create-react-app для розгортання в Heroku.