# CORS跨域问题解决方案

## 问题描述
前端从 `localhost:5173` 访问 `company.citupro.com:5500` 的API时出现CORS错误：
```
Access to XMLHttpRequest at 'http://company.citupro.com:5500/api/parse/get-calendar-info?date=2025-08-09' 
from origin 'http://localhost:5173' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

## 解决方案

### 1. 灵活的CORS配置方案

#### 1.1 创建专门的CORS配置文件
- 文件位置：`app/config/cors.py`
- 提供多种配置方案，支持任意前端地址访问

#### 1.2 配置方案选择
- **方案1 (ALLOW_ALL)**: 允许任意前端地址访问（最灵活，开发环境推荐）
- **方案2 (IP_RANGE)**: 允许特定IP网段访问（生产环境推荐）
- **方案3 (FIXED_LIST)**: 只允许固定的前端地址（最安全）

#### 1.3 更新主应用配置
- 文件位置：`app/__init__.py`
- 使用 `CORS(app, **CORS_OPTIONS)` 配置
- 动态设置Origin头部，支持任意前端地址

### 2. CORS配置详情

#### 2.1 允许的源（Origins）

**当前配置**: 允许任意前端地址访问
```python
# 在 app/config/cors.py 中
ALLOW_ALL_ORIGINS = True  # 启用最灵活的配置

# 支持任意Origin，包括但不限于：
# - http://localhost:5173
# - http://192.168.3.218:5173
# - http://10.0.0.1:3000
# - http://172.16.1.100:8080
# - 以及任何其他前端地址
```

**其他配置选项**:
```python
# 方案2: 允许特定IP网段
ALLOWED_IP_RANGES = [
    "192.168.0.0/16",    # 局域网IP段
    "10.0.0.0/8",        # 内网IP段
    "172.16.0.0/12",     # 内网IP段
]

# 方案3: 固定地址列表
ALLOWED_ORIGINS = [
    "http://localhost:5173",
    "http://your-frontend-ip:port",
]
```

#### 2.2 允许的HTTP方法
```python
ALLOWED_METHODS = [
    "GET", "POST", "PUT", "DELETE", "OPTIONS"
]
```

#### 2.3 允许的请求头
```python
ALLOWED_HEADERS = [
    "Content-Type", "Authorization", "X-Requested-With", 
    "Accept", "Origin", "Cache-Control", "X-File-Name"
]
```

#### 2.4 暴露的响应头
```python
EXPOSED_HEADERS = [
    "Content-Type", "Content-Length", 
    "Content-Disposition", "X-Total-Count"
]
```

### 3. 测试CORS配置

#### 3.1 运行测试脚本
```bash
# 测试灵活CORS配置（推荐）
python test_flexible_cors.py

# 测试特定IP地址
python test_cors_new_ip.py

# 快速验证
python quick_verify_cors.py
```

#### 3.2 测试内容
- **固定Origin测试**: 验证常见前端地址
- **随机Origin测试**: 验证任意前端地址支持
- **CORS预检请求**: 验证OPTIONS请求
- **实际跨域请求**: 验证GET请求
- **动态Origin头部**: 验证响应头设置

### 4. 重启应用

修改CORS配置后，需要重启Flask应用：
```bash
# 如果使用Python直接运行
python application.py

# 如果使用Flask命令
flask run --host=0.0.0.0 --port=5500
```

### 5. 前端配置建议

#### 5.1 确保请求包含正确的头部
```javascript
const response = await fetch('/api/parse/get-calendar-info?date=${date}', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    },
    credentials: 'include'  // 如果需要发送cookies
});
```

#### 5.2 处理CORS错误
```javascript
try {
    const response = await fetch(url, options);
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
} catch (error) {
    if (error.name === 'TypeError' && error.message.includes('CORS')) {
        console.error('CORS错误：请检查服务器配置');
    }
    throw error;
}
```

### 6. 常见问题排查

#### 6.1 检查Flask-CORS版本
确保安装了正确版本的Flask-CORS：
```bash
pip install Flask-CORS==4.0.0
```

#### 6.2 检查防火墙设置
确保服务器防火墙允许5500端口的访问。

#### 6.3 检查代理配置
如果使用Nginx等反向代理，确保代理配置正确转发CORS头部。

### 7. 生产环境配置

在生产环境中，建议：
1. 限制允许的源为实际的前端域名
2. 使用HTTPS
3. 配置适当的CORS缓存时间
4. 监控CORS相关的错误日志

## 验证步骤

1. ✅ 更新CORS配置文件
2. ✅ 重启Flask应用
3. ✅ 运行CORS测试脚本
4. ✅ 在前端测试跨域请求
5. ✅ 检查浏览器开发者工具的网络面板

## 注意事项

- CORS配置修改后必须重启应用才能生效
- 确保前端请求的URL与后端配置的CORS规则匹配
- 如果使用代理或负载均衡器，确保CORS头部被正确传递
- 在生产环境中谨慎配置CORS，避免安全风险