SecurityError: Failed to construct 'WebSocket, when I upload react js application in heroku server, Local all file are running fine

问题

when I upload react js app to the heroku sever , Failed to construct web socket

回答1:

It's a problem caused by the latest update to react-script. Downgrade your react-script package to 3.2 for now.

npm install react-script@3.2

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

回答2:

You can do it without downgrading react-script by doing following process.

You can change line number 62 of

node_modules/react-dev-utils/webpackHotDevClient.js

from

protocol:'ws',

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

Same is going with the Google Cloud Platform(Failed to construct 'WebSocket.). The above amendment will work for that also, and I hope for AWS too.

回答3:

Use

"react-scripts": "3.2.0"

instead of

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

After that, you can deploy again.

回答4:

If you create your app using create-react-app, then follow the below steps...

Windows 10
Node Version 10.16.0

Open the terminal on your project root and type the following command. npm i express compression morgan --save
Press enter

Create a server.js in your project root directory and in there, place the following code.

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);
    
})

and in your package.json file, change the start script as follows:
"start": "node server.js",

go ahead and run your app using npm start.

The above correction will create an express app which is secure by default. This starts a express app on which the react app will run on.

Deploy it to Heroku.

Example app hosted in heroku (React): ManoBran WebApp

That should help!

来源：https://stackoverflow.com/questions/59241291/securityerror-failed-to-construct-websocket-when-i-upload-react-js-applicatio

标签

javascript

heroku