SecurityError: échec de la construction de 'WebSocket, lorsque je télécharge l'application react js sur le serveur heroku, tous les fichiers locaux fonctionnent correctement

C'est un problème causé par la dernière mise à jour de react-scripts . Rétrograder votre package react-scripts à la version 3.2 pour le moment.

npm install react-scripts@3.2

https://github.com/facebook/create-react-app/pull/8079#issuecomment-562373869

Vous pouvez le faire sans déclasser react-script en effectuant le processus suivant.

Vous pouvez changer le numéro de ligne 62 de

node_modules / react-dev-utils / webpackHotDevClient.js

de

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

à

protocol:'ws',

Il en va de même avec la plate-forme Google Cloud (échec construire 'WebSocket.). L'amendement ci-dessus fonctionnera également pour cela, et j'espère aussi pour AWS.

Si vous créez votre application à l'aide de create-react-app , suivez les étapes ci-dessous ...

• Windows 10
• Version 10.16.0 du nœud

Ouvrez le terminal à la racine de votre projet et tapez la commande suivante. npm i express compression morgan --save
Appuyez sur Entrée

Créez un server.js dans le répertoire racine de votre projet et placez-y le code suivant.

const {createServer} = require ('http');
const express = require('express');
const compression = require('compression');
const morgan = require ('morgan');
const path = require('path');
const normalizePort = port => parseInt(port, 10);

const app = express();
const PORT = normalizePort(process.env.PORT || 8000);
const dev = app.get('env') !=+ 'production';

if(!dev){
    app.disable('x-powered-by');
    app.use(compression());
    app.use(morgan('common'));

    app.use(express.static(path.join(__dirname,'build')))

    app.get('/',(req,res)=>{
        res.sendFile(path.join(__dirname,'build','index.html'))
    })
}

if(dev){
    app.use(morgan('dev'))
    app.disable('x-powered-by');
    app.use(compression());
    app.use(morgan('common'));

    app.use(express.static(path.join(__dirname,'build')))

    app.get('/',(req,res)=>{
        res.sendFile(path.join(__dirname,'build','index.html'))
    })
}

const server = createServer(app);

server.listen(PORT,err =>{
    if(err) throw err;
    console.log('Server Started on port :' + PORT);
    
})

et dans votre fichier package.json, modifiez le script de démarrage comme suit:
"start": "node server.js",

allez-y et exécutez votre application en utilisant npm start.

La correction ci-dessus va créer une application express qui est sécurisée par défaut. Cela démarre une application express sur laquelle l'application react s'exécutera.

Déployez-la sur Heroku.

Exemple d'application hébergée dans heroku (React): ManoBran WebApp

Cela devrait aider!

Utilisez

"react-scripts": "3.3.0", in package.json.

au lieu de

"react-scripts": "3.2.0" 

Après cela, vous pouvez déployer à nouveau.