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

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

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 `

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

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.

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.

• 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"

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

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.