http2 - ViteJS websocket with https/2 over haproxy: Unexpected response code: 404

Question

A blank new vitejs project is created and started in a container

npm init @vitejs/app test --template vue
cd test
npm install
npx vite --https --port 9000

A haproxy configuration is in between the container's server and the browser. The global and the defaults haproxy.cnf sections seem to make no difference. They have the same results as with the default.

The relevant frontend backend definition is:

frontend port8443
    bind *:8443 ssl crt /etc/haproxy/d250.hu.pem alpn h2,http/1.1

    default_backend default

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

where 10.110.24.2 is the IP of the container.

Once ViteJS is opened in the browser it loads, but then fails.

Chrome reports

[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

Firefox reports a slightly different message

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

Both hang for a while, or reload rapidly to make a websocket connection. The error message is hard to catch. After the error it says polling to restart, and tries again.

A workaround is to disable http/2 by removing alpn h2,http/1.1

So, http1.1 works fine. Vitejs without proxy works fine, and as a default it uses http/2. Websockets in general work with both, http and http/2.

Is this now a bug in vitejs, or in the haproxy configuration?

question from:https://stackoverflow.com/questions/65837607/vitejs-websocket-with-https-2-over-haproxy-unexpected-response-code-404

Answer 1

Waitting for answers