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?

Solution

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.

Comments

[bbsimonbb]

I'm new to this. My spa needs to integrate in an existing asp.net app (presenting the same https origin to browser), so I've configured a reverse proxy on IIS to forward spa requests to webpack dev server. That's why, in the screenshot, you see https://notilusdev... in the address bar. So the only way out of this I can see is to get the HMR requests to follow the same pipeline, request sent to https://notilusdev..., SSL terminated at IIS, unencrypted request forwarded to webpack dev server. Is this feasable ?

[Elijah Lofgren]

For people quickly skimming and working locally with localhost, the key part that helped me as adding this "public" property to the devServer property in vue.config.js: public: 'http://localhost:8080'

[Anand Rockzz]

I'm equally interested in your another story :) can you please elaborate.

[bbsimonbb]

@AnandRockzz to use ssl in development, or to make your spa in development share an origin with your legacy app, the simplest solution I've found is to put express in front of everything, then reverse-proxy to webpack. The three tricks you need to master are configuring reverse-proxy, terminating ssl, and handing over websocket connections.

[bbsimonbb]

@AnandRockzz ask a question ( and notify me) if you'd like me to post my working express script.

[bbsimonbb]

This was feasible, but absolutely not with IIS, whose reverse proxy config was nightmarish. I did the reverse proxy with Express and it was simple and painless.