Błąd aplikacji React: Nie udało się zbudować „WebSocket”: Niebezpieczne połączenie WebSocket może nie zostać zainicjowane ze strony załadowanej przez HTTPS

Wdrażam aplikację React, ale pojawia się dziwny błąd podczas odwiedzania strony przez https.

Gdy odwiedzam stronę przez https, pojawia się następujący błąd:

SecurityError: Nie udało się zbudować „WebSocket”: Niebezpieczne połączenie WebSocket może nie zostać zainicjowane ze strony załadowanej przez HTTPS.

Ale kiedy przechodzę do strony przez http, działa idealnie.

Problem polega na tym, że nie używam websockets, o ile wiem. Przeszukałem kod, aby sprawdzić, czy istnieje żądanie http, które powinno dotyczyć https lub ws: zamiast wss: ale nic nie widzę.

Czy ktoś już na to wpadł?

Dołączam kopię pliku package.json. Daj mi znać, jeśli potrzebujesz mnie do przesłania innych części kodu, aby pomóc w debugowaniu.

Z góry dziękuję.

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

Dla osób oczekujących na skrypty reagowania na łatkę:

W przypadku testowania lokalnego przez https możesz ręcznie edytować

node_modules/react-dev-utils/webpackHotDevClient.js

Oto kod, który chcesz w wierszu 62 tego pliku:

protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

W celu wdrożenia wykonaj następujące kroki:

npm install -g serve // This can be done locally too

npm run build

A następnie w pliku package.json dodaj skrypt wdrażania do pracy z serwerem:

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

I wtedy

npm deploy or yarn deploy

Mam nadzieję, że ta odpowiedź pomoże Ci pozbyć się błędu.

Aby uzyskać więcej informacji, patrz tutaj `

Wiele odpowiedzi tutaj faktycznie rozwiązać problem, ale najprostszy sposób znalazłem ponieważ poprosiłem to pytanie jest dodanie pakietu npm służyć do zależności.

yarn add serve lub npm i serve

a następnie zamień skrypt startowy na:

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

Jest to właściwie prosto z tworzenia reagują aplikacji Docs

Oto prostsze rozwiązanie. Downgrade react-scriptsTO 3.2.0w twojej package.json(mój był w 3.3.0).

Być może trzeba będzie usunąć swoje package-lock.jsoni node_modules( rm -rf package-lock.json node_modules), a następnie zrobić npm i. Zaangażuj się zarówno w nowy, jak package.jsoni package-lock.jsonw repozytorium.

Minęło trochę czasu, odkąd bawiłem się reakcją, ale react-scriptsjeśli się nie mylę, jest on zbudowany na pakiecie webpack, więc najprawdopodobniej używa przyspieszenia rozwoju webpack-dev-server. Używa gniazd internetowych w celu komunikowania się z klientem w celu uruchomienia ponownego ładowania na gorąco, gdy wykryje zmiany na dysku.

Prawdopodobnie dopiero uruchamiasz aplikację w trybie programistycznym, więc jeśli wdrażasz ją w środowisku produkcyjnym, powinieneś uruchomić, npm run buildktóry utworzyłby zestaw plików javascript, które możesz obsłużyć na swoim ulubionym serwerze WWW.

• Utwórz z tyłu aplikacji folder i node.js
• Utwórz router ekspresowy w katalogu głównym aplikacji
• Utwórz plik server.js

Dodaj ten kod do 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}...`)
})

Do pliku pakage.json

,
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && yarn && yarn run build"
  }

I dodaj proxy proxy do /folder-name-react-app/pakage.json

  "proxy": "http://localhost:8080"

każdy, kto zmaga się z tym problemem podczas wdrażania Heroku, obniża twój reac-scriptsmoduł do 3.2.0.

1. usuń package-lock.jsonplik
2. usuń node_modulesfolder
3. zamień react-scriptswersję na3.2.0
4. npm install wszystkie moduły ponownie

Musisz spojrzeć na ten artykuł ze strony internetowej Create-React-App. Wyjaśnia, jak prawidłowo wdrożyć aplikację React utworzoną za pomocą aplikacji „Create-React-App”, która wskazuje konkretny buildpack dla aplikacji React, mars / create-reag-app-buildpack, w Github, którego potrzebowałeś podczas tworzenia aplikacji Heroku.

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

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

Miałem ten sam problem z niepewnym problemem z gniazdem internetowym, który wszyscy tu mają, więc przetestowałem rozwiązanie z artykułu Create-React-App. To rozwiązało problem. Nie trzeba modyfikować node_module ani nic.

Wszystko, co musisz zrobić, to nam to polecenie, tworząc aplikację heroku z CLI w katalogu głównym aplikacji React:

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

następnie:

git push heroku master

kiedy wejdziesz na swoją stronę w Heroku. będzie działać zgodnie z oczekiwaniami bez żadnego błędu „niezabezpieczonego gniazda sieciowego”.

(Nie wiem, jak dodać do niego pakiet budujący mars / create-reagować na aplikację PO tym, jak już utworzyłeś / wdrożyłeś w Heroku. Jeszcze tego nie zrobiłem).

Wydaje się, że powyższe rozwiązanie rozwiązuje problem, który zespół tworzenia aplikacji reaguje na wdrożenie w Heroku.