124 lines
3.6 KiB
Markdown
124 lines
3.6 KiB
Markdown
# 验证码404问题修复工作记录
|
||
|
||
**时间**: 2025年1月16日
|
||
**版本**: 0.2.1 → 0.2.2
|
||
**问题**: 前端管理界面登录验证码图片显示404错误
|
||
|
||
## 问题分析
|
||
|
||
### 根本原因
|
||
Spring Boot主启动类`QuapApplication`的包扫描配置中缺少了`com.qaup.web`包，导致`CaptchaController`验证码控制器未被扫描注册。
|
||
|
||
### 错误表现
|
||
- 前端登录页面验证码显示"系统接口 404 异常"
|
||
- 后端接口`/captchaImage`返回404 Not Found
|
||
- 通过`/actuator/mappings`确认验证码接口未注册
|
||
|
||
### 技术分析
|
||
- `CaptchaController`位于`com.qaup.web.controller.common`包
|
||
- `@ComponentScan`配置中遗漏了`com.qaup.web`包
|
||
- 验证码相关依赖配置完整（kaptcha 2.3.3）
|
||
|
||
## 修复过程
|
||
|
||
### 1. WebSocket并发问题修复
|
||
在解决验证码问题的同时，发现并修复了WebSocket并发问题：
|
||
- **问题**: 多线程同时发送WebSocket消息导致`TEXT_PARTIAL_WRITING`状态错误
|
||
- **解决**: 在`CollisionWebSocketHandler.sendMessage()`方法中添加`synchronized (session)`锁
|
||
|
||
```java
|
||
// 添加同步锁确保同一个会话的消息发送是串行的
|
||
synchronized (session) {
|
||
if (session.isOpen()) { // 再次检查状态
|
||
session.sendMessage(new TextMessage(message));
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 包扫描配置修复
|
||
修改`QuapApplication.java`中的`@ComponentScan`配置：
|
||
|
||
```java
|
||
@ComponentScan(basePackages = {
|
||
"com.qaup.system",
|
||
"com.qaup.framework",
|
||
"com.qaup.common",
|
||
"com.qaup.quartz",
|
||
"com.qaup.generator",
|
||
"com.qaup.collision",
|
||
"com.qaup.websocket",
|
||
"com.qaup.web" // 新增：扫描web包（包含验证码控制器）
|
||
})
|
||
```
|
||
|
||
### 3. 前端环境变量配置
|
||
修复了前端Vue项目缺少环境变量配置的问题：
|
||
|
||
在`vue.config.js`中添加环境变量默认值：
|
||
```javascript
|
||
// 设置环境变量默认值
|
||
process.env.VUE_APP_BASE_API = process.env.VUE_APP_BASE_API || '/dev-api'
|
||
process.env.VUE_APP_TITLE = process.env.VUE_APP_TITLE || 'QAUP机场预警管理系统'
|
||
```
|
||
|
||
## 验证结果
|
||
|
||
### 后端验证
|
||
```bash
|
||
curl -X GET "http://localhost:8080/captchaImage" -H "Accept: application/json"
|
||
```
|
||
|
||
返回结果：
|
||
```json
|
||
{
|
||
"msg": "操作成功",
|
||
"img": "/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsL...",
|
||
"code": 200,
|
||
"captchaEnabled": true,
|
||
"uuid": "ec415fe0b23945e1bc7b84bd49cdfa24"
|
||
}
|
||
```
|
||
|
||
### 服务状态
|
||
- **后端服务**: http://localhost:8080 ✅
|
||
- **前端服务**: http://localhost:1025 ✅
|
||
- **验证码接口**: `/captchaImage` ✅
|
||
|
||
## 技术要点
|
||
|
||
### 验证码组件配置
|
||
- 使用kaptcha 2.3.3生成验证码
|
||
- 支持数学运算和字符两种类型
|
||
- 配置在`CaptchaConfig`中，默认数学运算类型
|
||
- 验证码有效期通过Redis管理
|
||
|
||
### Spring Boot包扫描
|
||
- `@ComponentScan`默认只扫描主类所在包及子包
|
||
- 跨包组件需要显式配置包扫描路径
|
||
- 确保所有业务模块的控制器都被包含
|
||
|
||
### WebSocket线程安全
|
||
- 同一WebSocket会话的消息发送必须串行化
|
||
- 使用`synchronized`确保线程安全
|
||
- 双重检查会话状态避免异常
|
||
|
||
## 解决的问题
|
||
|
||
1. ✅ 验证码图片404错误 → 正常显示验证码
|
||
2. ✅ WebSocket并发异常 → 线程安全发送
|
||
3. ✅ 前端环境变量缺失 → 默认值配置
|
||
4. ✅ 包扫描配置不全 → 完整包扫描
|
||
|
||
## 注意事项
|
||
|
||
- 服务重启后验证码功能正常
|
||
- WebSocket消息广播性能有轻微影响（加锁）
|
||
- 前端代理配置确保API请求正确转发
|
||
- 确保Redis服务运行（验证码存储依赖）
|
||
|
||
## 后续建议
|
||
|
||
1. 监控WebSocket消息发送性能影响
|
||
2. 考虑使用消息队列优化高并发场景
|
||
3. 完善前端错误处理和用户提示
|
||
4. 添加验证码接口的健康检查 |