使用 https/2 over haproxy 的 ViteJS websocket：意外响应代码：404

问题描述

在容器中创建并启动一个空白的新vitejs项目

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

haproxy 配置位于容器的服务器和浏览器之间。全局和默认 haproxy.cnf 部分似乎没有区别。它们的结果与默认值相同。

相关的前端后端定义为：

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

其中 10.110.24.2 是容器的 IP。

在浏览器中打开 ViteJS 后，它会加载，但随后失败。

Chrome 报告

[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 报告略有不同的消息

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

两者都挂了一段时间，或者快速重新加载以建立 websocket 连接。 错误信息很难捕捉。错误后，它说轮询重新启动，然后重试。

一种解决方法是通过删除 alpn h2,http/1.1

来禁用 http/2

所以，http1.1 工作正常。 没有代理的 Vitejs 工作正常，默认情况下它使用 http/2。 Websockets 通常同时适用于 http 和 http/2。

这是 vitejs 或 haproxy 配置中的错误吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）