Proxy issue between two vue apps when created with vue-cli3

[srchulo]

Version

3.5.3

Reproduction link

https://github.com/srchulo/vue-cli3-proxy-error

Environment info

  System:
    OS: Linux 3.10 CentOS Linux 7 (Core)
    CPU: (1) x64 Intel(R) Xeon(R) Gold 6140 CPU @ 2.30GHz
  Binaries:
    Node: 11.13.0 - /usr/bin/node
    Yarn: 1.9.4 - /usr/bin/yarn
    npm: 6.9.0 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmGlobalPackages:
    @vue/cli: 3.0.1

Steps to reproduce

1. Go into public app and type "yarn serve".

2. Go into app/ and type "yarn serve"

3. Go to http://localhost:8080

4. Open the developer console.

5. Click "Go to App" link in the top right.

6. Observe the console (web socket connection closes before it is established, and failed requests show).

7. Make a change to app/, observe that hot reload will not occur.

What is expected?

Websockets should successfully be proxied to the Vue app on port 8081 and hot reload for the app on 8081 should work.

What is actually happening?

The websockets never connect, there are many failed requests, and hot reload does not work.

---

I did not have this issue when my project was on vue-cli2-- it was once I upgraded to vue-cli3 that I saw this issue.

These are some of the errors that I observe:

WebSocket connection to 'ws://localhost:8080/app/sockjs-node/946/btaua0jf/websocket' failed: WebSocket is closed before the connection is established.

POST http://localhost:8080/app/sockjs-node/946/2f03xsro/xhr_streaming?t=1554071918837 404 (Not Found)

GET http://localhost:8080/app/sockjs-node/946/a5xm1iat/eventsource 404 (Not Found)

GET http://localhost:8080/app/sockjs-node/139/crmbubvo/eventsource 404 (Not Found)

Additional error that shows from jsonp?c=_jp.aemoxtb:1:

Uncaught SyntaxError: Unexpected token <

After leaving both servers open long enough and having the page opened to /app, then this error will show in the terminal for the public app:

Proxy error: Could not proxy request /app/sockjs-node/266/vz0ie5cy/websocket from localhost:8080 to http://localhost:8081. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

And it will continue to give that error with slightly different arguments after sockjs-node/.

refiling from vuejs/vue#9797 where I misfiled it.

[LinusBorg]

Haven't run the reproduction yet, so this is just from looking at the config:

You haven't told the proxy to handle websocket connections as well:

module.exports = {
  devServer: {
    host: '0.0.0.0',
    public: '0.0.0.0:8080',
    disableHostCheck: true,
    proxy: {
      '/app': {
        target: 'http://localhost:8081',
        changeOrigin: true,
+        ws: true,
      }
    }
  }
}

[srchulo]

So I was seeing the same issues with ws: true, and I just tried it again to confirm and I see the same errors. Were you able to run that locally without any errors by adding that?

[srchulo]

Oh, sorry. I just saw that you mentioned that you hadn't actually run it yet.

[srchulo]

I tried the example shown here for http-proxy-middleware:

https://github.com/chimurai/http-proxy-middleware/blob/master/examples/websocket/index.js

And the websocket worked and connected as expected. I'm not sure if this indicates an error with vue-cli or not, but when I do the same config (including ws: true) proxying from one Vue app to another, then I get the errors mentioned above.

[srchulo]

@LinusBorg just curious if you've had time to try this locally?

[LinusBorg]

Could reproduce it, yes. But didn't have the time to take a proper look what's actually causing it.

Then forgot about it for a while.

I'll rate it a bug and well see further.

[srchulo]

Great, thanks for the update!

[silh]

Can it be related to this - nodejs/node#23169 ?