Nuxt 3 Docker环境下WebSocket连接失败求助（Safari浏览器）

问题现象 #

报错信息：
nuxt WebSocket connection to 'ws://localhost:4000/ws' failed: Could not connect to the server.
WebSocket connection to 'ws://localhost:24678/_nuxt/' failed: The operation couldn’t be completed. Socket is not connected
Failed to load resource: The network connection was lost. http://localhost:24678/_nuxt/

已配置docker-compose.yml端口映射：

• 24678:24678
• 4000:4000

解决步骤 #

• 修正Nuxt网络绑定配置
  Docker容器内的localhost与宿主机不属于同一网络空间，需修改nuxt.config.ts，让服务监听容器所有网卡，并指定浏览器能正确访问的WebSocket地址：

export default defineNuxtConfig({
  server: {
    host: '0.0.0.0', // 允许容器外部访问
    port: 24678
  },
  vite: {
    server: {
      hmr: {
        protocol: 'ws',
        host: 'localhost', // 指向宿主机地址
        port: 24678
      }
    }
  }
})

• 验证Docker容器端口监听
  进入容器执行netstat -tulpn，确认服务确实监听0.0.0.0而非仅localhost；同时检查宿主机防火墙是否放行24678、4000端口。

• 调整Safari浏览器设置

  1. 打开Safari偏好设置 → 高级 → 勾选“在菜单栏中显示开发菜单”
  2. 点击顶部菜单栏“开发” → 勾选“禁用跨域限制”
  3. 清除浏览器缓存与网站数据，避免旧连接缓存干扰

• 检查Content模块关联服务配置
  若端口4000的WebSocket服务也在Docker中运行，需确保该服务同样监听0.0.0.0，客户端连接地址指向宿主机localhost:4000。

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