Laravel Echo Server、Socket.io与Nginx部署后WebSocket连接失败求助

核心问题定位 #

线上WebSocket连接失败的根源是前端请求路径、Nginx代理配置、Laravel Echo Server配置三者不匹配，同时存在跨域、协议不一致的问题。

1. 修正Nginx代理配置 #

当前Nginx的proxy_pass指向带HTTPS的域名，但Laravel Echo Server运行在HTTP协议下，且同一服务器内应直接指向本地地址，避免不必要的DNS解析和证书验证。修改后的配置如下：

location /socket.io {
    proxy_pass http://127.0.0.1:6001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    # 处理跨域需求
    add_header Access-Control-Allow-Origin "*";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "Origin, Content-Type, Accept, Authorization";
}

修改后重启Nginx：sudo systemctl restart nginx

2. 调整Laravel Echo Server配置 #

关键修改点：

• authHost：若Laravel项目与Echo Server在同一服务器，保持http://localhost即可；若不在同一服务器，填写Laravel项目的线上HTTPS地址（如https://domain.com）
• apiOriginAllow：开启跨域允许，适配前端HTTPS请求
• 保持protocol为http（Nginx已处理SSL，无需Echo Server单独配置证书）

修改后的laravel-echo-server.js配置片段：

{
    "authHost": "http://localhost", // 替换为你的Laravel线上地址（若跨服务器）
    "authEndpoint": "/broadcasting/auth",
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "apiOriginAllow": {
        "allowCors": true,
        "allowOrigin": "https://domain.com", // 替换为你的前端域名
        "allowMethods": "GET, POST",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token"
    }
}

修改后重启Laravel Echo Server服务：laravel-echo-server restart

3. 修正前端Echo配置 #

当前前端直接请求6001端口，但Nginx已将/socket.io路径代理到Echo Server，无需指定端口。修改bootstrap.js：

import Echo from 'laravel-echo';

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.host, // 直接使用当前域名，无需加6001端口
    transports: ["websocket", 'polling'],
});

编译前端资源并重新部署：npm run build（根据项目实际构建命令调整）

4. 额外排查点 #

• 防火墙设置：确保6001端口仅允许本地访问（Nginx代理场景下，无需对外暴露该端口）
• Redis连接验证：执行redis-cli ping确认Laravel和Echo Server均可正常连接Redis
• Echo Server日志排查：执行laravel-echo-server logs查看实时日志，定位具体报错原因

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