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）

当前配置: 允许任意前端地址访问

# 在 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
# - 以及任何其他前端地址

其他配置选项:

# 方案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方法

ALLOWED_METHODS = [
    "GET", "POST", "PUT", "DELETE", "OPTIONS"
]

2.3 允许的请求头

ALLOWED_HEADERS = [
    "Content-Type", "Authorization", "X-Requested-With", 
    "Accept", "Origin", "Cache-Control", "X-File-Name"
]

2.4 暴露的响应头

EXPOSED_HEADERS = [
    "Content-Type", "Content-Length", 
    "Content-Disposition", "X-Total-Count"
]

3. 测试CORS配置

3.1 运行测试脚本

# 测试灵活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应用：

# 如果使用Python直接运行
python application.py

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

5. 前端配置建议

5.1 确保请求包含正确的头部

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错误

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：

pip install Flask-CORS==4.0.0

6.2 检查防火墙设置

确保服务器防火墙允许5500端口的访问。

6.3 检查代理配置

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

7. 生产环境配置

在生产环境中，建议：

限制允许的源为实际的前端域名
使用HTTPS
配置适当的CORS缓存时间
监控CORS相关的错误日志

验证步骤

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

注意事项

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

CORS_FIX_README.md 4.6 KB Cronologia Originale