Vue3+Guacamole键盘失效问题排查与解决

1. 问题背景与现象描述

最近在开发一个基于Vue3+Element-Plus的后台管理系统时，遇到了一个棘手的问题：集成了Guacamole远程桌面功能后，发现键盘输入完全失效。这个问题在项目上线前夕突然出现，导致远程操作功能形同虚设。

具体表现为：

• 鼠标操作正常（点击、拖动等）
• 键盘所有按键无响应（包括字母、数字、功能键）
• 控制台无任何错误提示
• 仅在特定浏览器（Chrome最新版）出现
• 开发环境正常，生产环境出现问题

2. 技术栈与环境分析

2.1 前端技术栈

• Vue 3.2.47
• Element-Plus 2.3.3
• Guacamole客户端 1.5.0
• Webpack 5.75.0

2.2 后端环境

• Guacamole服务端 1.5.0
• Tomcat 9.0.73
• Nginx 1.23.3

2.3 浏览器环境

• Chrome 112.0.5615.138（问题出现）
• Firefox 111.0.1（正常）
• Edge 112.0.1722.34（正常）

3. 问题排查过程

3.1 初步检查

首先确认了以下基础配置：

1. Guacamole连接参数正确
2. WebSocket连接正常建立
3. 键盘事件监听器已注册
4. 无跨域问题

3.2 深入排查

通过Chrome开发者工具进行事件监听分析：

javascript复制// 添加键盘事件监听测试
document.addEventListener('keydown', (e) => {
    console.log('Key pressed:', e.key);
});

发现键盘事件能被正常捕获，但Guacamole未响应。

3.3 关键发现

在对比开发和生产环境时，注意到：

• 生产环境使用了Nginx反向代理
• Content-Security-Policy (CSP)策略不同
• 生产环境启用了HTTP/2

4. 根本原因分析

经过反复测试，确认问题根源在于：

1. Element-Plus的焦点管理：ElDialog组件会劫持焦点
2. Guacamole的事件冲突：键盘事件被阻止冒泡
3. 生产环境配置差异