vite websocket 公网 端口 连接异常问题

vite websocket 端口连接异常问题

 

在vite websocket 开发时，可能会遇到端口是写死的，如果公网地址或域名 跟 代码本地的端口不一致，websocket 会出现连接异常的情况

在浏览器调试中可以发现浏览器使用 ws://公网地址或域名:本地端口 或 wss://公网地址或域名:本地端口  去连服务器。

 

传统网络架构中，大家习惯于服务通过 防火墙 或者 代理服务器 发布出去，而且本地服务端口跟发布出去的公网地址端口往往不一致。

比如本地3000 或 24678 ，发布出去通常会用http 80 或 https 443。

关于此问题 vite 在 2021.5.29 之后的版本应该都已经解决

 

官方说明 

详细可以参考大佬在 github 关于此 功能 or bug 的讨论和 merge 过程：

https://github.com/vitejs/vite/pull/3578

官方配置说明参考如下：

https://vitejs.dev/config/#server-hmr

关于clientport 说明

clientPort 是一个高级选项，只在客户端的情况下覆盖端口，这允许你为 websocket 提供不同的端口，而并非在客户端代码中查找。如果需要在 dev-server 情况下使用 SSL 代理，这非常有用。

当使用 server.middlewareMode 或 server.https 时，你需将 server.hmr.server 指定为你 HTTP(S) 的服务器，这将通过你的服务器来处理 HMR 的安全连接请求。这在使用自签证书或想通过网络在某端口暴露 Vite 的情况下，非常有用。

 

关于解决方案

升级vite，在server.hmr中添加clientport，示例如下，主要内容就是加黑加粗部分。

{
        server: {
            host: true,
            port: 23456,
            open: true,
            proxy: {
                '/api': {
                    target: process.env.SERVER_URL,
                    changeOrigin: true,
                },
            },
            hrm: {
                clientPort: 80
            }
        },
}

 

另外nginx 代理ws 或wss 需要格外添加配置，参考文章

nginx 代理 wss/ws websocket 协议