How can I fix these SockJS ssl errors?

Question

With vue-cli 3, I've got a vue app whirring away in development mode. I call npm run serve, and I see...

DONE  Compiled successfully in 431ms                                                                                                                                                                   
16:26:43
App running at:
- Local:   http://localhost:8080/mobileapp/v/
- Network: http://172.18.55.202:8080/mobileapp/v/

(The path /mobileapp/v/ comes from a baseUrl config variable. The domain notilusdev.dimosoftware.com/mobileapp points to a vdir in iis, and requests to /mobileapp/v/ are reverse proxied to webpack-dev-server)

In the browser, the app fires up no problem. Then it starts firing off requests to https://172.18.55.202:8080/sockjs-node/info?t=1529072806971. These requests fail, because there's no ssl on that port. I don't even want the ip as the public address of the site. How does Webpack (or sockjs) construct this url? Why does it think there's ssl on this port when it's just given me a straight http link? If it's basing the protocol on the address-bar protocol, why is it ignoring the address-bar host-name. What can I configure to get these requests to succeed?

Answer 1

This was a struggle, but it's working now...

Add a public property to the devServer object in vue.config.

The property I needed was public, not publicPath, and the clincher was learning that vue will ignore config changes in configureWebpack{ devServer: {. You need to use the top level devServer property.

So my working vue.config.js is...

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '\/mobileapp\/v\/',
    devServer :{
      public : 'notilusdev.dimosoftware.com',
      host : '0.0.0.0',
      disableHostCheck : true
    }  
}

Then I needed to reverse-proxy https and wss:// requests through express, terminating the ssl in express, but that's another story.