Errore app React: impossibile creare "WebSocket": non è possibile avviare una connessione WebSocket non sicura da una pagina caricata su HTTPS

Sto distribuendo un'app React ma sto ricevendo uno strano errore quando visito la pagina tramite https.

Quando visito la pagina su https ricevo il seguente errore:

SecurityError: impossibile creare "WebSocket": non è possibile avviare una connessione WebSocket non sicura da una pagina caricata su HTTPS.

Ma quando vado alla pagina su http funziona perfettamente.

Il problema è che non sto usando websocket per quanto ne so. Ho cercato nel codice per vedere se c'è una richiesta a http che dovrebbe essere https o ws: invece di wss: ma non vedo nulla.

È già successo a qualcuno?

Includo una copia del file package.json. Fammi sapere se hai bisogno di me per caricare altre parti di codice per aiutare il debug.

Grazie in anticipo.

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

Per chi è in attesa di script di reazione per una patch:

Per i test locali su https , è possibile modificare manualmente

node_modules/react-dev-utils/webpackHotDevClient.js

Ecco il codice che desideri alla riga 62 di quel file:

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

Per la distribuzione seguire i passaggi seguenti:

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

npm run build

E poi nel tuo package.json aggiungi uno script deploy per lavorare con serve:

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

E poi

npm deploy or yarn deploy

Spero che questa risposta ti aiuti a sbarazzarti dell'errore.

Per maggiori informazioni consultare qui `

Molte risposte qui in realtà risolvono il problema, ma il modo più semplice che ho trovato da quando ho posto questa domanda è quello di aggiungere il pacchetto npm servire alle tue dipendenze.

yarn add serve o npm i serve

e quindi sostituire lo script iniziale con il seguente:

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

Questo è in realtà direttamente fuori degli create-reagiscono-app docs

Ecco una soluzione più semplice. Esegui il downgrade del tuoreact-scripts a 3.2.0nella vostra package.json(la mia era a 3.3.0).

Potrebbe essere necessario eliminare il tuo package-lock.jsone node_modules( rm -rf package-lock.json node_modules), quindi eseguire un npm i. Commettere sia il nuovo package.jsonche package-lock.jsonil repository.

È passato un po 'di tempo da quando ho fatto confusione con reagire, ma react-scriptsè costruito sul webpack se non sbaglio, quindi molto probabilmente usa webpack-dev-server per accelerare lo sviluppo. Utilizza i websocket per comunicare con il client per attivare una ricarica a caldo quando rileva le modifiche sul disco.

Probabilmente stai appena avviando l'applicazione in modalità di sviluppo, quindi se la stai distribuendo in un ambiente di produzione, dovresti eseguire npm run buildciò che creerebbe un insieme di file javascript che puoi servire con il tuo server web preferito.

• Crea sul retro della cartella e dell'app node.js
• Crea un router espresso nella radice della tua app
• Crea un file server.js

Aggiungi questo codice in 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}...`)
})

Into su pakage.json

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

E aggiungi il proxy di route in /folder-name-react-app/pakage.json

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

chiunque sia alle prese con questo problema durante la distribuzione di heroku esegue il downgrade del reac-scriptsmodulo a 3.2.0.

1. rimuovi package-lock.jsonfile
2. rimuovi node_modulescartella
3. sostituire la react-scriptsversione a3.2.0
4. npm install tutti i moduli di nuovo

Devi leggere questo articolo dal sito Web Create-React-App. Spiega come distribuire correttamente l'app React creata con 'Create-React-App' che punta a buildpack specifico per l'app React, mars / create-rea-app-buildpack, su Github di cui avevi bisogno durante la creazione dell'app Heroku.

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

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

Ho avuto lo stesso problema con il problema insicuro del websocket che tutti hanno qui, quindi ho testato la soluzione dall'articolo Create-React-App. Ha risolto il problema. Non è necessario modificare node_module o altro.

Tutto ciò che devi fare è usare questo comando quando crei l'app heroku dalla CLI alla radice dell'app React:

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

poi:

git push heroku master

quando vai sul tuo sito web su Heroku. funzionerà come previsto senza alcun errore "insicure websocket".

(Non so come aggiungere Mars / create -eagire-app buildpack ad esso DOPO che hai già creato / distribuito su Heroku. Non ho ancora avuto quella parte.)

La soluzione di cui sopra sembra affrontare il problema che il team di create -eagire-app ha per la distribuzione su Heroku.