Websockets fail with HTTPS and http/2 if there is a reverse proxy on the line.

ViteJS fails to upgrade to websockets when using HTTPS and http/2 and there is a reverse proxy between the server and the browser.

Reproduction

Create a new container and install a blank new ViteJS project.

npm init @vitejs/app test --template vue
cd test
npm install
npx vite --https --host my-test.mydomain.com --port 8443

Install a reverse proxy, and tell it to use your container, and a test domain. For example haproxy on rpm based systems:

dnf -y install haproxy

Set /etc/haproxy.cfg to this minimal config:

frontend port8443
    bind *:8443 ssl crt /etc/haproxy/certificate.pem alpn h2,http/1.1
    default_backend default

backend default
    server my-test 10.0.0.4:8443 ssl verify none alpn h2,http/1.1

… where 10.0.0.4 is the IP of your container with the vitejs instance.

certificate.pem should be a certificate valid for a domain. Use this domain in /etc/hosts to map to the ip of the haproxy server.

Once it’s all set up, open the domain in the browser. Vite will load, … but then, it will go into an endelss loop trying to reconnect. The broswer’s inspector will have a message, its a bit hard to catch:

Logs

In chrome, observe:

[vite] connecting...
client:200 WebSocket connection to 'wss://my-test.mydomain.com:8443/' 
failed: Error during WebSocket handshake: Unexpected response code: 404
(anonymous) @ client:200

In firefox:

[vite] connecting...
Firefox can’t establish a connection to the server at wss://my-test.mydomain.com:8443/.

Workaround

Use only http/1.1 - in haproxy, remove alpn h2,http/1.1 on both sides. However, this might be not an option for people using hosting services.

System Info

• vite version: vite/2.0.0-beta.36
• Operating System: Fedora 32 / 33
• Node version: tested with v12.19.0, v12.20.1 and v14.14.0
• Package manager (npm/yarn/pnpm) and version: npm 6.14.8, 6.14.10

[xorik]

It works perfectly in vue cli. It said:

It seems you are running Vue CLI inside a container. and after that websocket for HMR works perfectly, even if port on the proxy is different. E.g. I have https://some.server/ that proxies to http://localhost:8080.

But for the vite dev server, it totally ignores the port from URL, and uses port from the --port argument (3000 by default). So I’m forced to do something like https://some.server:3000 (same port as on vite dev), to make it work.

Would be nice to have similar behavior with vue cli.

UPD this config helped with the issue:

  server: {
    hmr: {
      host: 'some.server,
      port: 443,
      protocol: 'wss'
    }
  }

[benatkin]

Adding @xorik’s code to vite.config.js worked. If there’s some way to automatically detect it, that would be nice.