webpack-dev-server: sockjs-node ERR_CONNECTION_REFUSED when accessing from network

For all people with the same error. It will also occur if your server (webpack-dev-sever) is listening on another port (e.g. 8080) than in line "webpack-dev-server/client?http://localhost:3000"

Change the webpack.config.js to

  devServer: {
    host: 'localhost', 
    port: 3000
  }, 

or change the port in the correspoding line: "webpack-dev-server/client?http://localhost:8080" to correct the port.

Change this line:

'webpack-dev-server/client?http://localhost:9090/',

to

'webpack-dev-server/client?http://' + require("os").hostname() + ':9090/',

Thanks for pointing me in the right direction @sokra : I couldn’t get this to work, possibly due to using a Mac locally and connecting via a windows machine which was not resolving the hostname correctly. However putting the IP in worked correctly:

# https://www.npmjs.com/package/ip
npm install ip --save-dev 

'webpack-dev-server/client?http://' + require("ip").address() + ':9191/',

This is what worked for me:

// vue.config.js
module.exports = {
  baseUrl: '',
  devServer: {
    host: 'localhost'
  }
}

Good Luck…

I have tried adding CORS headers to devServer to no avail:

devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
    }
  },

I also has some issues using

'webpack-dev-server/client?http://' + require("os").hostname() + ':9090/',

I expect using the IP as @mummybot suggested would work, but I just used 0.0.0.0.

'webpack-dev-server/client?http://0.0.0.0:9090'

since I am using angular-cli based project. it uses webpack but all the configurations are hidden from user. I mean I can’t find webpack.config.js so please help me

@shtse8 I am not sure I understand your question correct.

You could change localhost or 127.0.0.1 to 0.0.0.0 in the devServer object in your webpack config.

Change the webpack.config.js to

  devServer: {
    host: '0.0.0.0', 
    port: 3000
  }, 

and in the correspoding line: webpack-dev-server/client?http://0.0.0.0:8080

Turns out my issue was because I was running code on https and when I request something from webpack dev server it runs the socket code and uses whatever level of security is currently being used (in my case https). All I had to do was set https: true and it worked like a charm.

What i get is a stream of ERR_CONNECTION_RESET errors in the console when debugging in Chrome (ie, hot reload not working).

Now, my situation is that i’m running an ubuntu virtualbox guest, where the dev server is running, but trying to hit it from chrome running on the Windows host. Now certainly w/o doing anything else it won’t work (since localhost:3035 is the windows host, not the ubuntu guest), but typically what you do is setup port forwarding. Eg, i fwd localhost:3000 on the windows box to the guest no problem. I did the same for 3035, w/o doing that i was getting ERR_CONNECTION_REFUSED, but now i get ERR_CONNECTION_RESET.

Specifically, a curl on the ubuntu guest is fine:

$ curl http://127.0.0.1:3035/sockjs-node/info?t=1586362514258
{"websocket":true,"origins":["*:*"],"cookie_needed":false,"entropy":1226718011}

But a curl on the windows host fails:

$ curl http://127.0.0.1:3035/sockjs-node/info?t=1586362514258
curl: (56) Recv failure: Connection was reset

Somehow the dev-server is noticing “something” is amiss, but not sure how to fix it.

EDIT: Read up on some vagrant documentation (something similar to a vbox instance) and changed:

host: localhost

to

host: 0.0.0.0

in the webpacker.yml file (i’m using Rails/Vue), and that did the trick. No more ERR_CONNECTION_RESET errors.

EDIT 2: With the latest version of vue cli: @vue/cli 4.4.5, this is how I fixed it: In package.json (no more webpack.config.js):

 "scripts": {
    "serve": "vue-cli-service serve --port 8081 --host 0.0.0.0 --host localhost",

Yes, the double --host props were necessary. The default port is 8080, but that was in use for me.

Hi @MarcoPortillo,

It could be because of one of your browser-extensions. Can you try disabling all extensions and see if it works?

Also; if possible, please provide a repo to replicate this error so that we can check on our system.

Thanks 😃

@appsparkler thank you for your answers! I already solve the problem, I just update to a newer version and create the project from the beginning and the error is gone.

I have similar issue, but I get 404 instead of CONN refused. I am using dev middleware and hot middleware on express server to run the server. The page loads fine but the hot reload doesn’t work. When I save a change , webpack rebuilds but doesn’t automatically load the changes in the browser. webpack conifg:

  entry: [
require.resolve('webpack-dev-server/client'),
require.resolve('webpack/hot/dev-server'),
require.resolve('./polyfills'),
require.resolve('webpack-hot-middleware/client'),
path.join(paths.appSrc, 'index')
  ],
output: {
// Next line is not used in dev but WebpackDevServer crashes without it:
path: paths.appBuild,
pathinfo: true,
filename: 'bundle.js',
publicPath: '/'
 },

server.js :

  const express = require('express');
  const path = require('path');
  const app = express();
  const webpackDevMiddleware =require('webpack-dev-middleware');
  const webpackHotMiddleware =require('webpack-hot-middleware');
  require('babel-core/register');

  // const router=express.Router();
  // app.use(router);

  (function (){

    const webpack=require('webpack');
    const config=require('../config/webpack.config.dev');
    const compiler=webpack(config);

    app.use(webpackDevMiddleware(compiler, {
        publicPath: config.output.publicPath,
        stats: {colors: true}
    }));

    app.use(webpackHotMiddleware(compiler, {
      log: console.log,
      path: '/__webpack_hmr',
      heartbeat: 10 * 1000
    }));

  })();

  app.use(express.static('../'));


  app.listen(3000, ()=>console.log('Listening on port 3000'));

Any ideas?

@appsparkler 's reply was very helpful. localhost didn’t work for me but this did:

// vue.config.js
module.exports = {
  devServer: {
    host: '127.0.0.1'
  }
}

It actually fixes both my problems: The issue I linked in the previous comment, where Electron tries to load http://localhost:8080 when it should load http://127.0.0.1:8080, and also this error about sockjs-node not connecting.

I have webpack dev server running behind a proxy locally. In the proxy config file I am forwarding all requests with /webpack path to the webpack dev server.

When WDS tries to listen to the sock-js socket for HMR it is requesting localhost.com/sockjs-node/info… will I need to forward these on to the WDS also?

Just for future reference I was hitting 404 on this because I had: 'webpack-dev-server/client?0.0.0.0:9090' without the http://