If i use nginx as proxy,this port is 80,react app's port 3000,webpackHotdev create websocket with port 80,and the error occur.

[cyssxt]

Description

If i use nginx as proxy,nginx's port is 80,react app's port is 3000,webpackHotdev create websocket with port 80,and the error occur.

What are you reporting?
Can't react-scripts support proxy?

Tell us what you think should happen.

webpack-dev-server\client\index.js

 create html websocket client

var socketUrl = url.format({
protocol: protocol,
auth: urlParts.auth,
hostname: hostname,
port: (urlParts.port === '0') ? window.location.port : urlParts.port,
pathname: urlParts.path == null || urlParts.path === '/' ? "/sockjs-node" : urlParts.path
});
this port real value is 3000

webpackHotDevClient.js

  nodejs create webscoket server!

var connection = new SockJS(url.format({
protocol: window.location.protocol,
hostname: window.location.hostname,
port: window.location.port,
// Hardcoded in WebpackDevServer
pathname: '/sockjs-node'
}));
this port real value is 80
So we can't communicate through websocket ,while we use a proxy server !
I think if we want to resolve this bug ,we should add a config to set websocket port and host!

[Timer]

Hi! This is being implemented in #1588. Please watch it for updates. 😄

[cyssxt]

yeah!Get it!Thanks!

[bharath063]

For future reference, you can also work around this by doing something along the lines of

location /sockjs-node/ {
	    proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
	    proxy_set_header Upgrade $http_upgrade;
	    proxy_set_header Connection "upgrade";
	}

to your nginx config.

[sponia-joker]

@bharath063 It just what I need.thanks