Erreur d'application React: échec de la construction de «WebSocket»: une connexion WebSocket non sécurisée ne peut pas être établie à partir d'une page chargée via HTTPS

Je déploie une application React mais j'obtiens une étrange erreur lorsque je visite la page via https.

Lorsque je visite la page via https, je reçois l'erreur suivante:

SecurityError: Echec de la construction de 'WebSocket': Une connexion WebSocket non sécurisée ne peut pas être initiée à partir d'une page chargée via HTTPS.

Mais quand je vais sur la page http, cela fonctionne parfaitement.

Le problème est que je n'utilise pas de websockets pour autant que je sache. J'ai cherché dans le code pour voir s'il y avait une demande à http qui devrait être à https ou à ws: au lieu de wss: mais je ne vois rien.

Quelqu'un a-t-il déjà rencontré cela?

J'inclus une copie du fichier package.json. Faites-moi savoir si vous avez besoin de moi pour télécharger d'autres parties de code pour aider au débogage.

Merci d'avance.

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

Pour les personnes en attente de scripts de réaction pour un correctif:

Pour les tests locaux sur https , vous pouvez modifier manuellement

node_modules/react-dev-utils/webpackHotDevClient.js

Voici le code que vous voudrez à la ligne 62 de ce fichier:

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

Pour le déploiement, suivez les étapes ci-dessous:

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

npm run build

Et puis, dans votre package.json, ajoutez un script de déploiement pour travailler avec serve:

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

Et alors

npm deploy or yarn deploy

J'espère que cette réponse vous aidera à vous débarrasser de l'erreur.

Pour plus d'informations, reportez-vous ici `

Beaucoup de réponses ici résolvent réellement le problème, mais la manière la plus simple que j'ai trouvée depuis que j'ai posé cette question est d'ajouter le service de paquetage npm à vos dépendances.

yarn add serve ou npm i serve

puis remplacez votre script de démarrage par ce qui suit:

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

Ceci est en fait tout droit sorti des créer une réaction-app docs

Voici une solution plus simple. Downgrader votre react-scriptsà 3.2.0votre package.json( le mien était à 3.3.0).

Vous devrez peut-être supprimer vos package-lock.jsonet node_modules( rm -rf package-lock.json node_modules), puis effectuez une npm i. Validez votre nouveau package.jsonet package-lock.jsonle repo.

Cela fait un moment que je ne plaisante pas avec réagir, mais react-scripts plaisante pas avec react est construit au-dessus de webpack si je ne me trompe pas, il utilise donc très probablement webpack-dev-server pour accélérer le développement. Il utilise des websockets afin de communiquer avec le client pour déclencher un rechargement à chaud lorsqu'il découvre les modifications sur le disque.

Vous êtes probablement en train de démarrer l'application en mode développement, donc si vous la déployez dans un environnement de production, vous devez exécuter npm run buildce qui créera un ensemble de fichiers javascript que vous pourrez servir avec votre serveur Web préféré.

• Créez à l'arrière du dossier et de l'application node.js
• Créez un routeur express à la racine de votre application
• Créer un fichier server.js

Ajoutez ce code dans 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}...`)
})

Dans pakage.json

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

Et ajoutez le proxy d'itinéraire dans /folder-name-react-app/pakage.json

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

toute personne qui a des problèmes avec ce problème lors du déploiement de Heroku rétrograde votre reac-scriptsmodule vers 3.2.0.

1. supprimer le package-lock.jsonfichier
2. supprimer le node_modulesdossier
3. remplacer la react-scriptsversion par3.2.0
4. npm install tous les modules à nouveau

Vous devez consulter cet article du site Web Create-React-App. Il explique comment déployer correctement l'application React créée avec `` Create-React-App '' qui pointe vers un buildpack spécifique pour l'application React, mars / create-react-app-buildpack, sur Github dont vous aviez besoin lors de la création de l'application Heroku.

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

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

J'ai eu le même problème avec le problème de connexion Web non sécurisé que tout le monde a ici, j'ai donc testé la solution de l'article Create-React-App. Cela a résolu le problème. Pas besoin de modifier node_module ou quoi que ce soit.

Tout ce que vous devez faire est de nous utiliser cette commande lors de la création d'une application heroku à partir de la CLI à la racine de l'application React:

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

puis:

git push heroku master

lorsque vous accédez à votre site Web sur Heroku. il s'exécutera comme prévu sans aucune erreur "websocket non sécurisé".

(Je ne sais pas comment y ajouter le buildpack mars / create-react-app APRÈS que vous ayez déjà créé / déployé sur Heroku. Je ne suis pas encore arrivé à cette partie.)

La solution ci-dessus semble résoudre le problème que l'équipe de create-react-app a pour le déploiement sur Heroku.