web-dev-qa-db-fra.com

React erreur d'application: é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: Échec de construction de "WebSocket": une connexion WebSocket non sécurisée ne peut pas être établie à 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"
    ]
  }
}
node.jsreactjs
25
Leo Policastro

Beaucoup de réponses ici résolvent le problème, mais la façon la plus simple que j'ai trouvée depuis que j'ai posé cette question est d'ajouter le paquet npm serve à 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",
}

C'est en fait directement sorti de l'application create-react docs

10
Leo Policastro

Pour les gens qui attendent des scripts de réaction pour un patch:

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

Puis

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 `

36
Pratap Sharma

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

Vous devrez peut-être supprimer votre package-lock.json et node_modules (rm -rf package-lock.json node_modules), puis faites un npm i. Validez votre nouveau package.json et package-lock.json au dépôt.

5
oliversisson

Cela fait un moment que je ne plaisante pas avec réagir, mais react-scripts 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 venez probablement 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 build qui créerait un ensemble de fichiers javascript que vous pourrez servir avec votre serveur Web préféré.

4
Jimmy Stenke
  • 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"
3
Andres Mejias

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

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

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 d'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 avoir 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.

0
John Towery

toute personne qui a des problèmes avec ce problème sur herok déploiement vous rétrograde reac-scripts module à 3.2.0.

  1. retirer package-lock.json fichier
  2. retirer node_modules dossier
  3. remplacer react-scripts version à 3.2.0
  4. npm install tous les modules à nouveau
0
Asad