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"
]
}
}
node_modules
Hand , da diese nicht auf den gemeinsam genutzten Repo begangen werdenViele 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
odernpm i serve
und ersetzen Sie dann Ihr Startskript durch Folgendes:
Dies ist direkt aus den Dokumenten zum Erstellen und Reagieren von Apps
quelle
"dev": "react scripts start"
Das würden Sie ausführennpm run dev
, um lokal auszuführen.Hier ist eine einfachere Lösung. Downgrade dein
react-scripts
auf3.2.0
in deinpackage.json
(meins war bei3.3.0
).Möglicherweise müssen Sie Ihr
package-lock.json
undnode_modules
(rm -rf package-lock.json node_modules
) löschen und dann anpm i
. Legen Sie sowohl Ihr neuespackage.json
alspackage-lock.json
auch das Repo fest.quelle
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.quelle
npm run build
ausführen und nur den Inhalt desbuild
Verzeichnisses hochladen .NODE_ENV=production npm run build
und laden Sie dann nur dasbuild
Verzeichnis 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.Fügen Sie diesen Code in server.js hinzu
In pakage.json
Fügen Sie den Routen-Proxy zu /folder-name-react-app/pakage.json hinzu
quelle
Jeder, der mit diesem Problem bei der Heroku- Bereitstellung zu kämpfen hat, stuft Ihr
reac-scripts
Modul auf ein Downgrade herunter3.2.0
.package-lock.json
Datei entfernennode_modules
Ordner entfernenreact-scripts
Version ersetzen durch3.2.0
npm install
wieder alle Modulequelle
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:
dann:
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.
quelle