Vue-cli: sockjs-node (Not Found)

[mavajee]

Version

3.0.0-beta.15

Reproduction link

https://jsfiddle.net/w0jg8bdr/

Steps to reproduce

Use with nginx

What is expected?

HMR working with nginx

What is actually happening?

I use 3 version of vue cli and nginx. And each vue app have different sockjs-node path.

vue cli 10 have path 0.0.0.0:8082/sockjs-node/* and it's work

vue cli 12 have path http://localhost.com:8082/sockjs-node/* and it's work to

vue cli 15 have path http://localhost.com/sockjs-node/* and it's not work. How you can see port is missing

UPD. If i run app on 0.0.0.0:8082 without nginx all work fine

---

maybe this commit is the reason or this

It's bug or just I not correct config my app?

[mavajee]

I found the trouble, in this commit line 70, if remove '?/sockjs-node', all work

[mavajee]

versions 10 has the best correct sockjs path to dev serve from any host name.

[jkzing]

Umm, it should not work like that. What is baseUrl in your vue.config.js?

[mavajee]

@jkzing I try use baseUrl but it not work. in ver 10 I used absolute path to work with nginx

config.output.publicPath = http://${host}:${port}/

because need all request send to webpack dev server

UPD: I try '/' baseUrl
UPD: All files on dev server located in '/'.

[yyx990803]

@mavajee you should not be mutating publicPath because this value needs to be used in other places in addition to the wepback config. Use the baseUrl option.

[Akryum]

@yyx990803 Maybe we could check that and display the like of Don't change webpack 'ouput.publicPath' directly, use vue.config.js 'baseUrl' instead.

[yyx990803]

@Akryum that would be nice although it's a bit difficult to precisely detect that

[jkzing]

I guess OP's usage is like having a baseUrl: 'http://localhost:8082/' in vue.config.js.

With a nginx config like:

server {
  listen 8082 default_server;
  location / {
    proxy_pass  http://localhost:8080;
    proxy_set_header Host $host;
  }
}

Then open http://localhost:8082 in browser.

In above case, current strategy to fix the socket url to '/sockjs-node' is not enough, maybe we need to fix it to 'http://localhost:8080/sockjs-node'.

[mavajee]

Thank you for answers. I will check it tomorrow.

What if make '/sockjs-node' url same absolute dev server url. Anyway HMR and sockjs work only with dev server

[mavajee]

@jkzing, hi, now it work for me, but if i put to baseUrl absolute url, I have this (just incorrect display, but all work)

vue.config.js

const path = require('path')

const host = '0.0.0.0'
const port = 8085

module.exports = {
  lintOnSave: false,
  baseUrl: `http://${host}:${port}/`,

  devServer: {
    port,
    host,
    hotOnly: true,
    disableHostCheck: true,
    clientLogLevel: 'warning',
    inline: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
    },
  }
}

[mavajee]

and about historyApiFallback, just my usage situations. If use absolute url, it's will make some troubles.

[jkzing]

@mavajee Just FYI, if current historyApiFallback not works for you, you can still overwrite it in vue.config.js.

[mavajee]

@jkzing, yes I did it, i think it comment will be helpful for you

[linguamatics-albert]

Sorry to bother you guys again with this.

I'm finding a similar issue but I'm not so sure is related to this, so just in case I prefer to drop the comment here.

This one comes when running vue-cli-service serve --host xyz. When running it rise the webpack dev server successfully with everything, but the hot reload it won't work. A further inspection on the error log it shows that the webpack dev server cannot reach sockjs-node:

sockjs.js?9be2:1601 GET http://localhost:8080/sockjs-node/info?t=1528877926478 net::ERR_CONNECTION_REFUSED 

but the webpack dev server was opening in the hostname specified by the --host flag.

In previous versions of vue-cli I was doing the same thing and I didn't got the same problem.

I've got the suspicious that this comes because here:

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/serve.js#L89

urls.lanUrlForConfig is always undefined when setting a host name through --host flag, therefore it will always spawn sockjs-node to localhost.

But maybe I'm doing something wrong. Am I missing something?

I'm suing webpak 4.12.0 which I believe that is the one that it get install when running vue create myProject

[jkzing]

@linguamatics-albert , It's actually a bug of serve command, it should not act like that.

As a work around, you can use devServer.public in vue.config.js to specify your host.
Which is included in this PR https://github.com/vuejs/vue-cli/pull/1526.

[srchulo]

I think this issue still happens if you have a path at the end of devServer.public:

devServer: {
    host: '0.0.0.0',
    public: '0.0.0.0:8080/app',
    disableHostCheck: true
},

I can get it to work if I remove /app. As a workaround, I've done this in my vue.config.js for the vue project that's doing the proxying:

proxy: {
    '/app': {
        target: 'http://frontend_app:8081',
        changeOrigin: true,
        pathRewrite: {
            '^/app/sockjs-node': ''
        },
    }
}

This fixes the sockjs-node not found error, however, now hot reload doesn't seem to be working.

[srchulo]

Also, this error only started occurring for me once I upgraded to vue cli 3 from 2.

[srchulo]

Never mind, I thought my above solution worked, but it looks like it doesn't.

[Goldziher]

This error is still occuring. I'm working on a multi vue app project that is contained within an nginx layer. Whenever I try to upgrade one of the apps (all using vue-cli 3) to a newer version of the vue-cli, or run yarn upgrade on vue-cli or any of its plugins, this errors occurs.

Any suggested fix?

[iamface]

I used @srchulo's comment and added the following to my vue.config.js and the error went away for me using cli 3.0.

host: '0.0.0.0',
public: '0.0.0.0:8080',
disableHostCheck: true

I'm assuming this only occurs to the dev server and does not happen in production build?

[amravazzi]

I'm having a kind of different problem. I'm using apollo-client and getting this error in console, twice every time I reload the page:

WebSocket connection to 'ws://localhost:8082/sockjs-node/355/xgym14in/websocket' failed: Unknown reason

Here is my vue.config.js:

module.exports = {
  baseUrl: 'http://localhost:8082/',
  devServer: {
    public: 'localhost:8082',
    host: 'localhost',
    port: 8082,
    disableHostCheck: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
    }
  }
}

I spent 2 days searching in Google, but couldn't find anything useful. Any help?

[chanlito]

@amravazzi same here.

[marcoippolito]

In Ubuntu 18.04.03 Server Edition and with [email protected], 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?

[Monakiel]

I used @srchulo's comment and added the following to my vue.config.js and the error went away for me using cli 3.0.

host: '0.0.0.0',
public: '0.0.0.0:8080',
disableHostCheck: true

I'm assuming this only occurs to the dev server and does not happen in production build?

1 year later but I had trouble finding a solution too. And yours worked. Thanks!