Chrome下HTTPS自定义端口6530的Socket.IO连接异常排查

问题背景 #

• Laravel后端部署在https://example001.com，React前端部署在https://example002.com
• Socket.io客户端版本v4.8.1，服务端版本v4.7.5
• 仅Chrome存在异常：未提前打开后端域名时，前端无法建立WebSocket连接，抛出websocket error；Safari、Firefox可正常连接
• 本地HTTP环境无此问题，仅HTTPS生产环境触发

错误信息 #

Socket connection error---------: J: websocket error
at Z.onError (engine.io-client-C44f3zIw.js:1:1577)
at ws.onerror (engine.io-client-C44f3zIw.js:1:7721)

服务器监听地址 #

wss://example001:6530/socket.io/?user_id=1&user_token=eU1GUXBpbk...&user_type=admin&user_status=active&environment=production&EIO=4&transport=websocket

前端连接代码 #

export const handleSocketConnection = createAsyncThunk(
"socket/connectSocket",
async (data, thunkAPI) => {
const { user_id, user_type, user_token } = data;

    var options = {
        transports: ['websocket'],
        query: {
            user_id,
            user_token,
            user_type,

        },
        secure: true,
        withCredentials: false,
    };

    try {
        const socket = io(CHAT_URL, options);


        socket.on("connect", () => {
            console.log("Socket connected successfully");
            thunkAPI.dispatch(setSocketConnected(true));
        }
        );
        socket.on("connect_error", (err) => {
            console.error("Socket connection error---------:", err);
        });
        socket.on("disconnect", () => {
            console.log("Socket disconnected");
            thunkAPI.dispatch(setSocketConnected(false));
        });

        return thunkAPI.dispatch(setSocket(socket));
    } catch (error) {
        thunkAPI.dispatch(setSocketConnected(false));
        return rejectWithValue(error);
    }
}
);

修复方案 #

1. 调整后端CORS与Cookie配置 #

Chrome对跨域Cookie的拦截规则比其他浏览器更严格，即使前端设置withCredentials: false，若后端存在会话Cookie，仍可能触发拦截：

• 在Laravel的CORS配置中，将supports_credentials设为true，allowed_origins明确添加https://example002.com（不能用通配符*）
• 将后端Cookie的SameSite属性改为SameSite=None; Secure（仅HTTPS环境可用，避免Chrome跨域拦截）

2. 修改Socket.io客户端配置 #

Chrome跨域场景下，强制使用WebSocket可能触发隐私限制，建议调整配置：

• 移除transports: ['websocket']，让客户端先通过轮询建立连接，再自动升级到WebSocket
• 将withCredentials改为true，配合后端CORS的supports_credentials配置
• 确保CHAT_URL为完整的https://example001.com:6530，避免域名解析错误

调整后的客户端配置示例：

var options = {
    query: { /* 原有参数 */ },
    secure: true,
    withCredentials: true,
};

3. 验证SSL证书有效性 #

Chrome对证书校验更严格，检查后端SSL证书：

• 确认证书包含example001.com的正确域名，且未过期
• 证书需由受信任的CA签发（自签名证书在生产环境会被Chrome拦截）
• 检查证书链是否完整，避免出现信任链断裂问题

4. 后端Socket.io服务配置 #

在Laravel的Socket.io服务（如Laravel Echo Server）中，开启CORS支持：

// 示例配置
"cors" => [
    "origin" => "https://example002.com",
    "methods" => ["GET", "POST"],
    "credentials" => true
]

确保服务监听地址为0.0.0.0或绑定正确的公网域名，避免仅监听localhost

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