140 lines
3.4 KiB
Markdown
140 lines
3.4 KiB
Markdown
# 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. 使用调试工具诊断
|
||
在浏览器控制台运行：
|
||
```javascript
|
||
debugWebSocketToken()
|
||
```
|
||
|
||
### 2. 检查Token状态
|
||
调试工具会显示：
|
||
- ✅ 所有localStorage中的token
|
||
- 🔍 当前使用的token信息
|
||
- ⏰ JWT token的过期时间
|
||
- 💡 针对性的修复建议
|
||
|
||
### 3. 根据诊断结果修复
|
||
|
||
#### 情况1: 没有Token
|
||
```javascript
|
||
// 解决方案：重新登录系统
|
||
// 或手动设置测试token（仅用于测试）
|
||
localStorage.setItem('x-auth-token', 'your-valid-token-here')
|
||
```
|
||
|
||
#### 情况2: Token已过期
|
||
```javascript
|
||
// 解决方案：重新登录获取新token
|
||
// 或清除过期token后重新登录
|
||
localStorage.removeItem('x-auth-token')
|
||
// 然后重新登录
|
||
```
|
||
|
||
#### 情况3: Token存在但连接失败
|
||
```javascript
|
||
// 尝试重新连接
|
||
dualWebSocketManager.reconnectPrimary()
|
||
```
|
||
|
||
### 4. 验证修复结果
|
||
```javascript
|
||
// 测试连接
|
||
dualWebSocketManager.getConnectionStatus()
|
||
```
|
||
|
||
## 🛠️ 可用的调试命令
|
||
|
||
### 基本诊断
|
||
```javascript
|
||
debugWebSocketToken() // 诊断token状态
|
||
```
|
||
|
||
### 连接管理
|
||
```javascript
|
||
dualWebSocketManager.reconnectPrimary() // 重连主WebSocket
|
||
dualWebSocketManager.getConnectionStatus() // 查看连接状态
|
||
```
|
||
|
||
### Token管理（谨慎使用）
|
||
```javascript
|
||
// 查看当前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. 连接状态监控
|
||
```javascript
|
||
// 监听连接状态变化
|
||
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. 联系系统管理员进行服务器端排查
|