# 前端接口调试指南

## 问题诊断步骤

### 1. 打开浏览器开发者工具
- 按 F12 或右键 → 检查
- 切换到 **Console（控制台）** 标签
- 切换到 **Network（网络）** 标签

### 2. 查看控制台错误
在控制台查看具体的错误信息，常见错误：

#### 错误类型 1: CORS 错误
```
Access to XMLHttpRequest at 'http://localhost:8000/api/v1/...' 
from origin 'http://localhost:5173' has been blocked by CORS policy
```
**解决方法**: 这是正常的，说明请求到达了后端，检查后端 CORS 配置

#### 错误类型 2: 404 Not Found
```
GET http://localhost:5173/api/v1/departments 404 (Not Found)
```
**原因**: Vite 代理配置问题
**解决方法**: 重启前端开发服务器

#### 错误类型 3: 500 Internal Server Error
```
POST http://localhost:8000/api/v1/auth/login 500 (Internal Server Error)
```
**原因**: 后端服务错误
**解决方法**: 检查后端日志 `backend/logs/error_*.log`

#### 错误类型 4: Network Error
```
Error: Network Error
```
**原因**: 后端服务未运行
**解决方法**: 启动后端服务 `cd backend && uvicorn app.main:app --reload`

### 3. 查看网络请求

在 Network 标签中：
1. 找到失败的请求（红色）
2. 点击请求查看详情
3. 查看 **Response（响应）** 标签，查看后端返回的错误信息

### 4. 常见接口错误及解决

#### 登录失败
**检查点**:
- 后端是否运行：访问 http://localhost:8000/health
- 账号密码是否正确：admin / admin123
- Content-Type 是否为 `application/x-www-form-urlencoded`

#### 科室/员工/指标列表失败
**检查点**:
- 是否已登录获取 token
- token 是否过期
- 请求头是否包含 `Authorization: Bearer {token}`

#### 统计报表失败
**检查点**:
- 参数是否正确（period_year, period_month）
- 数据库中是否有对应数据

### 5. 快速测试工具

访问 http://localhost:5173/test-api.html 使用内置的 API 测试工具

### 6. 清除缓存

如果遇到问题：
1. 清除浏览器缓存：Ctrl+Shift+Delete
2. 清除 localStorage:
   ```javascript
   localStorage.clear()
   ```
3. 硬刷新：Ctrl+F5

### 7. 重启服务

如果以上都无效：
```bash
# 停止所有 Python 进程
powershell -Command "Get-Process | Where-Object {$_.ProcessName -eq 'python'} | Stop-Process -Force"

# 重启后端
cd D:\医院绩效系统\backend
python -m uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

# 重启前端（新终端）
cd D:\医院绩效系统\frontend
npm run dev
```

## 当前系统状态

### 后端状态
- 地址：http://localhost:8000
- 健康检查：http://localhost:8000/health
- API 文档：http://localhost:8000/api/v1/docs
- 日志目录：`backend/logs/`

### 前端状态
- 地址：http://localhost:5173
- Vite 配置：代理 `/api` 到 `http://localhost:8000`

### 默认账号
- 用户名：admin
- 密码：admin123

## 联系支持

如果问题仍未解决，请提供：
1. 控制台错误截图
2. Network 标签中失败请求的详情
3. 后端日志内容