xiaomubiao-master/WEBSOCKET_403_SOLUTION.md

WebSocket 403错误解决方案

🚨 问题描述

WebSocket connection to 'ws://localhost:3003/dji/api/v1/ws?x-auth-token=' failed: 
Error during WebSocket handshake: Unexpected response code: 403

🔍 原因分析

403错误通常表示认证失败，主要原因包括：

1. Token缺失: localStorage中没有有效的认证token
2. Token过期: 存储的token已经过期
3. Token格式错误: token格式不正确或损坏
4. 服务器配置: 服务器端认证配置问题

✅ 解决步骤

1. 使用调试工具诊断

在浏览器控制台运行：

debugWebSocketToken()

2. 检查Token状态

调试工具会显示：

• ✅ 所有localStorage中的token
• 🔍 当前使用的token信息
• ⏰ JWT token的过期时间
• 💡 针对性的修复建议

3. 根据诊断结果修复

情况1: 没有Token

// 解决方案：重新登录系统
// 或手动设置测试token（仅用于测试）
localStorage.setItem('x-auth-token', 'your-valid-token-here')

情况2: Token已过期

// 解决方案：重新登录获取新token
// 或清除过期token后重新登录
localStorage.removeItem('x-auth-token')
// 然后重新登录

情况3: Token存在但连接失败

// 尝试重新连接
dualWebSocketManager.reconnectPrimary()

4. 验证修复结果

// 测试连接
dualWebSocketManager.getConnectionStatus()

🛠️ 可用的调试命令

基本诊断

debugWebSocketToken()              // 诊断token状态

连接管理

dualWebSocketManager.reconnectPrimary()     // 重连主WebSocket
dualWebSocketManager.getConnectionStatus()  // 查看连接状态

Token管理（谨慎使用）

// 查看当前token
localStorage.getItem('x-auth-token')

// 设置测试token（仅用于测试）
localStorage.setItem('x-auth-token', 'test-token')

// 清除token
localStorage.removeItem('x-auth-token')

🔧 预防措施

1. 自动Token刷新

系统应实现token自动刷新机制，在token即将过期时自动获取新token。

2. 连接状态监控

// 监听连接状态变化
EventBus.on('WebSocket-ConnectionError', (error) => {
  if (error.code === 403) {
    // 处理认证失败
    console.log('认证失败，请重新登录')
  }
})

3. 优雅降级

当WebSocket连接失败时，系统应提供适当的用户提示和替代方案。

📋 常见问题

Q: 为什么token存在但仍然403？

A: 可能原因：

• Token已过期
• Token格式不正确
• 服务器端认证配置变更
• 网络环境问题

Q: 如何获取有效的token？

A:

1. 通过正常的登录流程
2. 检查登录接口的响应
3. 确保token正确存储到localStorage

Q: 开发环境下如何测试？

A:

1. 使用调试工具诊断
2. 手动设置测试token
3. 监控WebSocket连接日志

🚀 最佳实践

1. 定期检查Token: 实现定时检查token有效性
2. 错误处理: 完善的WebSocket错误处理机制
3. 用户体验: 提供清晰的错误提示和解决建议
4. 日志记录: 详细的连接和认证日志
5. 监控告警: 连接失败时的监控和告警机制

📞 技术支持

如果上述方法无法解决问题，请：

1. 收集完整的错误日志
2. 提供token诊断结果
3. 检查网络环境和服务器状态
4. 联系系统管理员进行服务器端排查