App-Fehler reagieren: 'WebSocket' konnte nicht erstellt werden: Eine unsichere WebSocket-Verbindung kann möglicherweise nicht von einer über HTTPS geladenen Seite initiiert werden

25

Ich stelle eine React-App bereit, erhalte jedoch einen seltsamen Fehler, wenn ich die Seite über https besuche.

Wenn ich die Seite über https besuche, erhalte ich die folgende Fehlermeldung:

SecurityError: Fehler beim Erstellen von 'WebSocket': Eine unsichere WebSocket-Verbindung kann möglicherweise nicht von einer über HTTPS geladenen Seite initiiert werden.

Aber wenn ich über http auf die Seite gehe, funktioniert es perfekt.

Das Problem ist, dass ich keine Websockets verwende, soweit ich das beurteilen kann. Ich habe den Code durchsucht, um festzustellen, ob eine Anfrage an http an https oder an ws: anstelle von wss: gesendet werden soll, aber ich sehe nichts.

Hat jemand schon einmal darauf gestoßen?

Ich füge eine Kopie der Datei package.json bei. Lassen Sie mich wissen, wenn ich andere Teile des Codes hochladen muss, um das Debuggen zu erleichtern.

Danke im Voraus.

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

Antworten:

38

Für Leute, die auf Reaktionsskripte für einen Patch warten:

Für lokale Tests über https können Sie manuell bearbeiten

node_modules/react-dev-utils/webpackHotDevClient.js

Hier ist der Code, den Sie in Zeile 62 dieser Datei benötigen:

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

Führen Sie für die Bereitstellung die folgenden Schritte aus:

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

npm run build

Fügen Sie dann in Ihrer package.json ein Bereitstellungsskript hinzu, um mit Serve zu arbeiten:

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

Und dann

npm deploy or yarn deploy

Ich hoffe, diese Antwort hilft Ihnen, den Fehler zu beseitigen.

Weitere Informationen finden Sie hier `

Pratap Sharma
quelle
Ich habe das gleiche Problem, also muss ich diese Datei nur innerhalb der Knotenmodule bearbeiten?
Versifiction
1
@Versifiction ja. Dies muss erfolgen, bis ein neuer Patch für React-Skripte veröffentlicht wird.
Pratap Sharma
wahrscheinlich sollte nicht modifiziert die node_modulesHand , da diese nicht auf den gemeinsam genutzten Repo begangen werden
oliversisson
Ich habe also das gleiche Problem und stelle meine App für Heroku bereit. Ich habe sogar nur eine Websocket-Datei mit Nachdruck festgeschrieben und sie für Heroku bereitgestellt, aber ich erhalte immer noch den gleichen Fehler. Hat jemand eine Lösung dafür? Das einzige, was ich nicht versucht habe, ist das Festschreiben des gesamten Verzeichnisses node_modules.
Tyler Strouth
@ TylerStrouth Gibt es eine Möglichkeit, dass Sie die Knotenmodule in Heroku bearbeiten können? Nach der Bereitstellung auf heroku werden die in package.json genannten Pakete installiert. Auf diese Weise werden auch die Änderungen, die Sie in der obigen Datei vorgenommen haben, überschrieben. Versuchen Sie, die Datei in den Knotenmodulen in Heroku zu bearbeiten.
Pratap Sharma
12

Viele Antworten hier lösen tatsächlich das Problem , aber der einfachste Weg , die ich gefunden habe , da ich diese Frage gestellt ist npm Paket hinzuzufügen dienen zu Ihrer Abhängigkeiten.

yarn add serve oder npm i serve

und ersetzen Sie dann Ihr Startskript durch Folgendes:

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

Dies ist direkt aus den Dokumenten zum Erstellen und Reagieren von Apps

Leo Policastro
quelle
2
Dies sollte die akzeptierte Antwort gewesen sein
Dinesh Shekhawat
1
Dies funktioniert bei mir nicht. Ich erhalte einen 404-Fehler, wenn ich meinen Server lokal
Hugo
Entschuldigen Sie die verspätete Antwort. Sie müssten ein anderes Skript für die lokale Entwicklung erstellen. Zum Beispiel. "dev": "react scripts start" Das würden Sie ausführen npm run dev, um lokal auszuführen.
Leo Policastro
6

Hier ist eine einfachere Lösung. Downgrade dein react-scriptsauf 3.2.0in dein package.json(meins war bei 3.3.0).

Möglicherweise müssen Sie Ihr package-lock.jsonund node_modules( rm -rf package-lock.json node_modules) löschen und dann a npm i. Legen Sie sowohl Ihr neues package.jsonals package-lock.jsonauch das Repo fest.

oliversisson
quelle
Hat für mich gearbeitet. Anfangs wurde immer wieder auf 3.3.0 zurückgegriffen, da ich den vorgeschlagenen Audit-Fix nach Abschluss der npm-Installation instinktiv ausführte.
MarsAndBack
4

Es ist schon eine Weile her, dass ich mit Reagieren rumgespielt habe, aber react-scripts herumgespielt habe basiert auf Webpack, wenn ich mich nicht irre, also verwendet es höchstwahrscheinlich Webpack-Dev-Server, um die Entwicklung zu beschleunigen. Es verwendet Websockets, um mit dem Client zu kommunizieren und ein Hot-Reload auszulösen, wenn Änderungen auf der Festplatte festgestellt werden.

Sie starten die Anwendung wahrscheinlich nur im Entwicklungsmodus. Wenn Sie sie also in einer Produktionsumgebung bereitstellen, sollten Sie sie ausführen npm run build, um eine Reihe von Javascript-Dateien zu erstellen, die Sie mit Ihrem bevorzugten Webserver bereitstellen können.

Jimmy Stenke
quelle
Das klingt richtig, danke! Ich werde das versuchen und Sie wissen lassen, ob es funktioniert.
Leo Policastro
Ich habe genau das gleiche Problem. Ich habe npm run build ausgeführt, um es auf GitHub-Seiten bereitzustellen, aber es hat nicht funktioniert. Deshalb habe ich Heroku ausprobiert. Ich erhalte den oben genannten Fehler. Es funktioniert unter HTTP, wenn ich eine Option zum Laden unsicherer Optionen auswähle Skripte. Eine Lösung, um es sicher zu machen und diesen Fehler zu beheben, wäre hilfreich!
Ganesha
@ Ganesha, dann machst du es falsch. Sie müssen a npm run buildausführen und nur den Inhalt des buildVerzeichnisses hochladen .
Jimmy Stenke
6
Es ist ein Problem mit der React Scripts 3.3.0-Version. Die ausführliche Dokumentation finden Sie hier " github.com/facebook/create-react-app/pull/8079 ". Ich habe ein Downgrade durchgeführt, um auf Skripte zu reagieren - 3.2.0 und ich erhalte jetzt keinen Fehler
Ganesha
1
@ Monsterstück, seltsam. Das war nicht das Ergebnis, als ich getestet habe, obwohl ich nicht auf Heroku getestet habe, sondern lokal. Es kann sein, dass die Umgebung ein Problem ist, daher ist es wahrscheinlich immer am besten, sie explizit zu erwähnen. NODE_ENV=production npm run buildund laden Sie dann nur das buildVerzeichnis auf heroku hoch (das heißt, build ist Ihre Webroot auf dem Webserver, es ist kein Knoten auf dem Server erforderlich, es sei denn, Sie verwenden ssr). Der Produktions-Build sollte nicht einmal den Webpack-Entwicklungsserver enthalten, ich würde sagen, das ist in diesem Fall ein Fehler.
Jimmy Stenke
3
  • Erstellen Sie im hinteren Bereich des Ordners und der node.js-App
  • Erstellen Sie einen Express-Router im Stammverzeichnis Ihrer App
  • Erstellen Sie eine server.js-Datei

Fügen Sie diesen Code in server.js hinzu

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}...`)
})

In pakage.json

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

Fügen Sie den Routen-Proxy zu /folder-name-react-app/pakage.json hinzu

  "proxy": "http://localhost:8080"
Andres Mejias
quelle
1

Jeder, der mit diesem Problem bei der Heroku- Bereitstellung zu kämpfen hat, stuft Ihr reac-scriptsModul auf ein Downgrade herunter 3.2.0.

  1. package-lock.jsonDatei entfernen
  2. node_modulesOrdner entfernen
  3. react-scriptsVersion ersetzen durch3.2.0
  4. npm install wieder alle Module
Asad
quelle
0

Sie müssen sich diesen Artikel von der Create-React-App-Website ansehen. Es wird erklärt, wie Sie die mit 'Create-React-App' erstellte React-App ordnungsgemäß bereitstellen, die auf ein bestimmtes Buildpack für die React-App, mars / create-react-app-buildpack, bei Github verweist, das Sie beim Erstellen der Heroku-App benötigt haben.

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

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

Ich hatte das gleiche Problem mit einem unsicheren Websocket-Problem, das alle hier haben, also habe ich die Lösung aus dem Artikel "Create-React-App" getestet. Es hat das Problem gelöst. Keine Notwendigkeit, node_module oder irgendetwas zu ändern.

Alles, was Sie tun müssen, ist dieser Befehl, wenn Sie eine Heroku-App über die CLI im Stammverzeichnis der React-App erstellen:

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

dann:

git push heroku master

wenn Sie auf Ihre Website bei Heroku gehen. Es wird wie erwartet ohne den Fehler "Unsicherer Websocket" ausgeführt.

(Ich weiß nicht, wie ich Mars / Build-React-App-Buildpack hinzufügen soll, nachdem Sie Heroku bereits erstellt / bereitgestellt haben. Ich habe diesen Teil noch nicht erhalten.)

Die obige Lösung scheint das Problem zu lösen, das das Team von Create-React-App für die Bereitstellung auf Heroku hat.

John Towery
quelle
Um ein Buildpack hinzuzufügen, nachdem es in Heroku bereitgestellt wurde, gehen Sie zur Heroku-App-Seite -> Registerkarte "Einstellungen" -> Abschnitt "Buildpacks". Sie fügen mers / create-react-app hinzu und klicken dann auf die Schaltfläche 'Buildpack hinzufügen'.
John Towery