Nuxt3开发模式下远程设备连接Supabase遇WebSocket连接失败求助

问题根源 #

你遇到的WebSocket connection to 'ws://localhost:4000/ws' failed错误，和Supabase的PostgreSQL配置无关，是Nuxt开发服务器的热模块替换（HMR）WebSocket默认绑定localhost导致的：远程设备访问时，会尝试连接自身的localhost:4000，而这个地址在远程设备上不存在，因此报错。

解决方案 #

1. 让开发服务器监听所有网络接口并配置HMR #

启动开发服务器时指定主机为0.0.0.0（允许所有设备访问），同时在nuxt.config.ts中配置HMR的客户端地址：

步骤1：修改启动命令

执行以下命令启动开发服务器：

yarn dev --host 0.0.0.0

步骤2：配置Nuxt的Vite HMR设置

在nuxt.config.ts中添加Vite服务器的HMR配置：

export default defineNuxtConfig({
  // 保留你原有的其他配置
  vite: {
    server: {
      hmr: {
        // 绑定所有网络接口
        host: '0.0.0.0',
        // 保持和开发服务器的WebSocket端口一致，默认是4000
        clientPort: 4000
      }
    }
  }
})

2. 确保防火墙开放端口 #

如果远程设备仍无法连接，检查本地电脑的防火墙设置，确保**4000端口（或你自定义的端口）**被允许对外访问。

3. 若使用内网穿透工具（如Ngrok） #

如果通过Ngrok等工具转发本地端口，需要将HMR的主机指向穿透后的域名，并使用wss协议：

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        host: 'your-ngrok-subdomain.ngrok.io',
        protocol: 'wss'
      }
    }
  }
})

验证 #

启动开发服务器后，用远程设备访问开发服务器提供的网络URL（如http://你的本地IP:3000），检查浏览器开发者控制台，确认WebSocket错误是否消失。

内容的提问来源于stack exchange，提问作者Moritz Pfennig