配置Socket.io与Caddy后无法建立连接的问题求助

核心问题分析 #

你的配置存在三个关键问题：

• Socket.io默认路径与前端配置不匹配
• Caddy代理未明确处理WebSocket升级逻辑
• 前端连接URL缺少HTTPS协议（生产环境域名必须用HTTPS）

分步修复方案 #

1. 调整Caddyfile配置 #

确保WebSocket请求被正确转发到后端，同时明确路径匹配规则：

website.com {
    redir https://www.website.com{uri} permanent
}

www.website.com {
    # 优先处理Socket.io的WebSocket及HTTP请求
    reverse_proxy /api/socket.io* localhost:3000 {
        header_up Host {host}
        header_up X-Real-IP {remote_host}
        header_up X-Forwarded-For {remote_host}
        header_up X-Forwarded-Proto {scheme}
        # 启用WebSocket支持
        transport http {
            keepalive true
            protocols h1 h2c
        }
    }

    # 代理常规API请求到后端
    reverse_proxy /api* localhost:3000

    # 代理前端页面到8080
    reverse_proxy /* localhost:8080
}

2. 修改后端Socket.io配置 #

指定匹配前端的路径，同时限制CORS来源（生产环境避免用*）：

const io = new Server(httpServer, { 
    cors: { 
        origin: "https://www.website.com",
        credentials: true
    },
    path: "/api/socket.io" // 与前端路径保持一致
});

3. 修正前端连接代码 #

补充HTTPS协议，确保路径与后端配置对齐：

socketRef.current = io('https://www.website.com', {
        path: '/api/socket.io',
        transports: ['websocket'],
        withCredentials: true
});

额外排查步骤 #

• 重启Caddy使配置生效：caddy reload
• 检查浏览器控制台错误：如果是404，确认路径匹配是否正确；如果是CORS，检查后端origin配置
• 直接测试后端Socket服务：访问https://www.website.com/api/socket.io/，若返回400状态码（而非404），说明后端服务正常
• 确认服务器防火墙允许本地访问3000端口，以及Caddy的80/443端口对外正常开放

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