AI_OJ_FRONTEND/docs/proxy-config.md

# API 代理配置说明

## 配置完成

✅ 已成功配置 Vite API 代理转发功能

## 配置详情

### 1. Vite 代理配置 ([vite.config.ts](../../vite.config.ts:28-36))

```typescript
server: {
  host: "0.0.0.0",
  port: 3000,
  open: true,
  // API 代理配置
  proxy: {
    // 代理所有 /api 开头的请求
    '/api': {
      target: 'http://localhost:8085',  // 后端服务器地址
      changeOrigin: true,                // 改变请求头中的 origin
      secure: false,                     // 支持 https
    },
  },
}
```

### 2. 环境配置更新 ([.env.dev](../../.env.dev))

```env
VITE_API_URL=/api  # 改为相对路径，使用代理
```

## 工作原理

```
前端请求流程：
┌─────────────┐
│  前端应用    │
│ localhost:3001 │
└──────┬──────┘
       │ 请求: /api/v1/auth/login
       ↓
┌──────────────┐
│  Vite 代理   │
│ 自动转发     │
└──────┬───────┘
       │ 转发到: http://localhost:8085/api/v1/auth/login
       ↓
┌──────────────┐
│  后端服务器   │
│ localhost:8085 │
└──────────────┘
```

### 请求示例

**前端发起请求：**
```typescript
// axios baseURL 为 '/api'
await login({ userAccount: 'admin', userPassword: 'password' })

// 实际请求 URL: http://localhost:3001/api/v1/auth/login
```

**Vite 代理自动转发：**
```
http://localhost:3001/api/v1/auth/login
           ↓
http://localhost:8085/api/v1/auth/login
```

## 配置说明

### proxy 配置项

- **`target`**: 后端服务器地址（`http://localhost:8085`）
- **`changeOrigin`**: 修改请求头的 origin，避免后端 CORS 限制
- **`secure`**: 是否验证 SSL 证书（开发环境设为 false）
- **`rewrite`**: （可选）重写请求路径

### 路径重写示例

如果后端 API 不包含 `/api` 前缀，可以使用 `rewrite`：

```typescript
proxy: {
  '/api': {
    target: 'http://localhost:8085',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, ''),
  },
}
```

这样前端请求 `/api/v1/auth/login` 会被转发为 `http://localhost:8085/v1/auth/login`

## 已配置的 API

根据后端文档 ([auth-api.md](../../auth-api.md))，以下接口已配置代理：

- ✅ `POST /api/v1/auth/login` - 用户登录
- ✅ `POST /api/v1/auth/refresh` - 刷新令牌
- ✅ `POST /api/v1/auth/auth` - 获取访问令牌
- ✅ `POST /api/v1/auth/validate` - 验证令牌

## 跨域问题解决

### 开发环境
✅ 使用 Vite 代理转发，不会有跨域问题

### 生产环境
生产环境需要在后端配置 CORS，或者使用 Nginx 反向代理：

**Nginx 配置示例：**
```nginx
server {
    listen 80;
    server_name your-domain.com;

    # 前端静态文件
    location / {
        root /var/www/html;
        try_files $uri $uri/ /index.html;
    }

    # API 代理
    location /api {
        proxy_pass http://localhost:8085;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
```

## 测试代理

### 1. 启动后端服务
确保后端服务运行在 `localhost:8085`

### 2. 启动前端开发服务器
```bash
npm run dev
```

服务器现在运行在：http://localhost:3001

### 3. 测试登录功能
访问：http://localhost:3001/#/user/login

尝试登录，查看网络请求：
- 请求 URL 应该是：`http://localhost:3001/api/v1/auth/login`
- Vite 会自动转发到：`http://localhost:8085/api/v1/auth/login`

### 4. 查看代理日志

在浏览器开发者工具的 Network 标签中，可以看到：
- Request URL: `http://localhost:3001/api/v1/auth/login`
- 如果代理成功，会收到来自 `localhost:8085` 的响应

## 常见问题

### Q1: 代理不生效？
**A:**
1. 确认修改配置后重启了开发服务器
2. 检查请求 URL 是否以 `/api` 开头
3. 查看控制台是否有错误信息

### Q2: 后端服务连接失败？
**A:**
1. 确认后端服务正在运行：`http://localhost:8085`
2. 尝试直接访问后端 API 测试
3. 检查防火墙设置

### Q3: 收到 CORS 错误？
**A:**
- 开发环境不应该有 CORS 问题，因为使用了代理
- 如果仍有问题，检查 `changeOrigin: true` 是否设置

### Q4: 需要代理多个后端服务？
**A:**
```typescript
proxy: {
  '/api': {
    target: 'http://localhost:8085',
    changeOrigin: true,
  },
  '/auth': {
    target: 'http://localhost:8086',
    changeOrigin: true,
  },
}
```

## 环境差异

| 环境 | API URL | 说明 |
|------|---------|------|
| 开发环境 | `/api` | 使用 Vite 代理转发到 localhost:8085 |
| 生产环境 | `https://api.your-domain.com` | 直接请求生产环境 API |

## 下一步

1. ✅ 代理配置已完成
2. ⏳ 启动后端服务（端口 8085）
3. ⏳ 测试登录功能
4. ⏳ 验证 API 调用是否正常

## 相关文件

- [vite.config.ts](../../vite.config.ts) - Vite 配置
- [.env.dev](../../.env.dev) - 开发环境配置
- [.env.prod](../../.env.prod) - 生产环境配置（待更新）
- [src/plugins/axios.ts](../../src/plugins/axios.ts) - Axios 配置
- [auth-api.md](../../auth-api.md) - 后端 API 文档