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

[mummybot]

I get the following errors filling up my console log when accessing from either a virtual machine or a remote computer's browser. Fortunately HMR still works correctly.

GET http://localhost:8080/sockjs-node/info?t=1456748942511 net::ERR_CONNECTION_REFUSED
    AbstractXHRObject._start @ abstract-xhr.js:128
    (anonymous function) @ abstract-xhr.js:21

[WDS] Disconnected!
    sock.onclose @ client?4b5e:70
    EventTarget.dispatchEvent @ eventtarget.js:49
    (anonymous function) @ main.js:356

webpack.config.js

var path = require('path');
var node_modules = __dirname + '/node_modules'
var webpack = webpack = require('webpack');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var postcssImport = require('postcss-import');
var precss = require('precss');


var config = {
    // Thanks Christian Alfoni: http://christianalfoni.github.io/javascript/2014/12/13/did-you-know-webpack-and-react-is-awesome.html#vendors
    addVendor: function (name, path, loader) {
        loader = loader || 0;
        this.resolve.alias[name] = path;
        this.module.loaders[loader].noParse.push(new RegExp(path));
    },
    entry: [
        'webpack-dev-server/client?http://localhost:9090/',
        'webpack/hot/only-dev-server',
        path.resolve(__dirname, 'app/main.js')
    ],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
    resolve: { alias: {} },
    devServer: {
        contentBase: 'build/'
    },
    module: {
        loaders: [
            {
                noParse: [],
                test: /\.jsx?$/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.s?css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&modules&importLoaders=1!postcss-loader')
            }
        ]
    },
      postcss: function(webpack) {
        return [
          postcssImport({ addDependencyTo: webpack }),
          precss,
          autoprefixer
        ];
      },
    plugins: [
        new BrowserSyncPlugin(
            {
                host: 'localhost',
                port: 3000,
                proxy: 'http://localhost:9090'
            },
            {
                reload: false
            }
        ),
        // Set the name of the single CSS file here.
        new ExtractTextPlugin('main.css', { allChunks: true }),
        new webpack.HotModuleReplacementPlugin()
    ]
};

config.addVendor('jquery', node_modules + '/jquery/dist/jquery.min.js');
config.addVendor('marked', node_modules + '/marked/lib/marked.js');

module.exports = config;

[mummybot]

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'
    }
  },

[mummybot]

Hi @sokra and others,

I have created a test repo with a simplified webpack.config.js to show exactly this happening. Hopefully it is just my config setup.

Cheers

[sokra]

Change this line:

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

to

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

[mummybot]

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/',

[marko911]

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?

[Hosar]

I'm also getting the same error:
GET /sockjs-node/info?t=1470203121020 404 8.530 ms - 45
GET /sockjs-node/info?t=1470203123328 404 1.403 ms - 45
GET /sockjs-node/info?t=1470203125639 404 0.776 ms - 45

I'm using: "express": "^4.14.0", "webpack": "^1.13.1", "webpack-hot-middleware": "^2.12.2", "webpack-middleware": "^1.5.1".

Any help is appreciated.

[ralphsmith80]

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'

[rlabrecque]

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://

[ghost]

I'm also getting the same error:
/sockjs-node/info?t=1470203121020 404 8.530 ms - 45
GET /sockjs-node/info?t=1470203123328 404 1.403 ms - 45
GET /sockjs-node/info?t=1470203125639 404 0.776 ms - 45

can you help me?

[gfried77]

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.

[onehorsetown]

@gfried77 - Thanks!

[stevenmusumeche]

@gfried77 you're my hero

[kaleemullah360]

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

[ghost]

@kaleemullah360 no you cant modify webpack.config.js. You can use:ng eject and you will see your webpack.config.js but you cannot modify. For now angular-cli don't allow modify the web pack.config.js

[shtse8]

I have the same issue. We are developing using domain, not localhost. how can I change the host?

[gfried77]

@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

[shtse8]

Thanks. I finally change it to public: hostname for development.

[scottsword]

I get this error if I try and do a get request on webpack dev server.
e.g.

// From a completely different web server I make a request to webpack dev server.
$.getScript('http://localhost:8081/bundle.js', function() {
  console.log('loaded'); 
});

The above actually works fine, but then it sets off all the get requests to the sock-js that blow up my console. Is there a way to just disable this? I'm not using HMR.

[scottsword]

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.

[appsparkler]

This is what worked for me:

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

Good Luck...

[josh08h]

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?

[MarcoPortillo]

Hi,

I have the same issue as well, I have tried everything that it says above, but still not luck. This is my webpack configuration.

webpack.config.js

var path = require('path');
var webpack = require('webpack');

var JS_PUBLIC = '/o/todo-app-webpack-1.0.0/js/dist/';

var JS_SRC = path.resolve(__dirname, 'src/main/resources/META-INF/resources/js/src/');

module.exports = {
    //baseUrl: '',
    devServer: {
        //host: '0.0.0.0',
        host: '0.0.0.0',
        hot: false,
        port: 3000,
        proxy: {
            '**': 'http://0.0.0.0:3000'
        },
        publicPath: JS_PUBLIC
    },
    entry: [
        //'webpack-dev-server/client?http://' + require("ip").address() + ':8080/', // WebpackDevServer host and port
        'webpack-dev-server/client?http://0.0.0.0:3000/',
        'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
        path.resolve(JS_SRC, 'main.js') // Your appʼs entry point
    ],
    module: {
        loaders: [
            {
                include: JS_SRC,
                loader: 'react-hot'
            },
            {
                include: JS_SRC,
                loader: ['babel'],
                query: {
                    presets: ['es2015', 'react']
                }
            }
      ]
    },
    output: {
        filename: 'bundle.js',
        path: './src/main/resources/META-INF/resources/js/dist',
        publicPath: JS_PUBLIC
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

Any ideas?

[appsparkler]

Hi @MarcoPortillo ,

Can you try on Firefox?

[MarcoPortillo]

Hi @appsparkler

This error pops up in Firefox:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.0.206:3000/sockjs-node/info?t=1565352240777. (Reason: CORS request did not succeed).
[WDS] Disconnected!

[appsparkler]

Hi @MarcoPortillo ,

Can you please create a small repo with this scenario and provide the link and steps to replicate this issue?

[Timmmm]

I expect lots of people here are having problems because on Mac, localhost is not the same as 127.0.0.1. See this issue (which I probably should have actually reported to this repo).

[Timmmm]

@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.

[Timmmm]

Opened #2272 for this.

[marcoippolito]

In Ubuntu 18.04.03 Server Edition, I'm getting these error messages, when deploying my starting-page of webapp with vue.js:
GET https://192.168.1.7:8081/sockjs-node/info?t=1579780726858
net::ERR_SSL_PROTOCOL_ERROR
GET https://192.168.1.7/sockjs-node/info?t=1579780726857
net::ERR_CERT_COMMON_NAME_INVALID

This is my vue.config.js file :

module.exports = {
  productionSourceMap: false,
  pluginOptions: {
    i18n: {
      enableInSFC: true
    }
  },
  devServer: {
    host: '192.168.1.7',
    hot: true,
    disableHostCheck: true
  }
}

How to solve the problem?

[Buuntu]

I am also having this problem, I've tried every combination of host name / configuration proposed above and still get this 403/404 error. I have a Django app serving the react app, maybe that's part of the problem.

Looks something like this in the console.

POST http://localhost:8000/sockjs-node/826/1mqmfbyx/xhr_streaming?t=1580090925171 403 (Forbidden)

There are other errors too but I imagine they stem from this.

[marcoippolito]

@appsparkler I put in vue.config. js:

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

But still get error message: GET https://localhost/sockjs-node/info?t=1580209837453 net::ERR_CONNECTION_REFUSED

[marcoippolito]

I put in webpack.config.js :

   plugins: [
        new BrowserSyncPlugin(
            {
                host: 'localhost',
                port: 3000,
                proxy: 'http://localhost:8080'
            },
            {
                reload: false
            }
        ),
    ]

But I continue to get this error message: GET https://localhost/sockjs-node/info?t=1580209837453 net::ERR_CONNECTION_REFUSED

Any idea about how to solve it?

[gfried77]

Should your GET not contain a port like 8443 or something?

[appsparkler]

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 :)

[marcoippolito]

@appsparkler In this issue report: https://github.com/webpack/webpack/issues/10329 I described in detail the problem.
In this GitHub repository you can find all the related files: https://github.com/marcoippolito/testproject

[MarcoPortillo]

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.

[marcoippolito]

@MarcoPortillo what did you update to a newer version? I'm still struggling with this problem
Which version do you have of webpack? And of vue-cli?

(base) marco@pc:~/vueMatters/testproject$ vue info

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
  Binaries:
    Node: 12.10.0 - ~/.nvm/versions/node/v12.10.0/bin/node
    Yarn: 2.0.0-rc.27 - ~/.nvm/versions/node/v12.10.0/bin/yarn
    npm: 6.13.6 - ~/.nvm/versions/node/v12.10.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.1.2 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.1.2 
    @vue/cli-plugin-babel: ^4.1.0 => 4.1.2 
    @vue/cli-plugin-eslint: ^4.1.0 => 4.1.2 
    @vue/cli-plugin-router:  4.1.2 
    @vue/cli-plugin-vuex:  4.1.2 
    @vue/cli-service: ^4.1.0 => 4.1.2 
    @vue/cli-shared-utils:  4.1.2 
    @vue/component-compiler-utils:  3.1.1 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    vue: ^2.6.10 => 2.6.11 
    vue-eslint-parser:  5.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.8.3 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.1.2

[marcoippolito]

In the PC I installed ex-novo Ubuntu 18.04.3 Desktop and I verified that the problem disappeared.

I ran the same tiny webapp in both laptop and pc, and using localhost and the ip-address both from within the laptop/PC and from the other device (PC/laptop) gave no error.
I reported everything here:
https://askubuntu.com/questions/1207812/webapp-fails-with-neterr-connection-refused-with-ubuntu-18-04-4-server-edition

According to you, what kind of problems/missing parts/lacking features or whatever the Ubuntu 18.04.4 Server Edition could have compared to the Ubuntu 18.04.4 Desktop Edition?
It would be great if we could give to the Ubuntu's people some hints/suggestions and help in solving this problem.

[aleczratiu]

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

You should reject create-react-app

[tunkul]

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.

[Nitin1121]

zone.js?6524:2526 GET https://localhost:9060/sockjs-node/info?t=1589222458358 net::ERR_CONNECTION_REFUSED
scheduleTask @ zone.js?6524:2526
ZoneDelegate.scheduleTask @ zone.js?6524:410
Zone.scheduleTask @ zone.js?6524:235
Zone.scheduleMacroTask @ zone.js?6524:258
eval @ zone.js?6524:2550
proto. @ zone.js?6524:1222
AbstractXHRObject._start @ abstract-xhr.js?c769:132
eval @ abstract-xhr.js?c769:21
ZoneDelegate.invokeTask @ zone.js?6524:424
Zone.runTask @ zone.js?6524:191
ZoneTask.invokeTask @ zone.js?6524:499
ZoneTask.invoke @ zone.js?6524:488
timer @ zone.js?6524:1734
setTimeout (async)
scheduleTask @ zone.js?6524:1744
ZoneDelegate.scheduleTask @ zone.js?6524:410
Zone.scheduleTask @ zone.js?6524:235
Zone.scheduleMacroTask @ zone.js?6524:258
eval @ zone.js?6524:1770
proto. @ zone.js?6524:1222
AbstractXHRObject @ abstract-xhr.js?c769:20
XHRCorsObject @ xhr-cors.js?4391:8
InfoAjax @ info-ajax.js?7213:19
InfoReceiver._getReceiver @ info-receiver.js?aa33:39
InfoReceiver.doXhr @ info-receiver.js?aa33:56
eval @ info-receiver.js?aa33:25
setTimeout (async)
InfoReceiver @ info-receiver.js?aa33:24
SockJS @ main.js?8e93:121
socket @ socket.js?e5d0:7
eval @ client?afea:165
eval @ client?afea:188
./node_modules/webpack-dev-server/client/index.js?http:/localhost:9060 @ polyfills.bundle.js:607
__webpack_require__ @ manifest.bundle.js:696
fn @ manifest.bundle.js:117
0 @ polyfills.bundle.js:699
__webpack_require__ @ manifest.bundle.js:696
webpackJsonpCallback @ manifest.bundle.js:26
(anonymous) @ polyfills.bundle.js:1
client?afea:45 [WDS] Disconnected!

[Nitin1121]

This is my error what to do

[Dnyaneshwari45]

http://localhost:4200/sockjs-node/info?t=1589356081490 net::ERR_CONNECTION_REFUSED
this is the error how to solve

[dikshantpatodia]

Add --inline=false to scripts in package.json or if you have webpack file, add inline: false in devServer. Hope it helps :)

[jiajianrong]

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.

Changing localhost to 0.0.0.0 also solved the problem of Error: read ECONNRESET in the request of sockjs-node.
There are two places for 0.0.0.0 setting: the host cofnig of devServer, and the line where you start the devServer (devServer.listen('0.0.0.0')

[Andreporto1]

where can i find the webpack to correct it?

[leonvisscher]

Hi all. I also ran into this problem using webpack-dev-server within a docker container. My problem was I had not published the 8080 port in the docker-compose file I used. I did EXPOSE the port in the Dockerfile so the HTTP requests worked fine, but the websocket connection needed for hot reload could not be established.

Leaving this here for when someone runs into this problem using a docker (+ docker-compose) setup, especially when you can reach the server through HTTP, but WS gives errors: Make sure you correctly publish your ports!

[MrSiby]

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",

Specifying the host to localhost in the npm serve script worked for me. My error was that it was getting a connection refused from my network address rather than anything local. By setting the host flag my apps now runs like so:

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://localhost:8080/