调用Flask发送文件API时浏览器报CORS错误但Postman正常

针对你遇到的Postman请求正常但浏览器请求/runExcel接口报CORS错误、其他接口正常的问题，核心原因在于文件响应的CORS配置冲突以及预请求（OPTIONS）未正确适配，以下是具体解决方案：

1. 修复Flask后端CORS配置，避免手动header冲突 #

你当前同时使用flask-cors的全局配置和手动设置响应header，容易导致规则冲突——尤其是谷歌认证域名场景下，*通配符在携带Authorization头的请求中无效。建议改为精准配置目标接口的CORS规则：

from flask import Flask, jsonify, request, send_file
from flask_cors import CORS
from io import BytesIO
import pandas as pd

app = Flask(__name__)
# 替换成你的前端实际域名，不要用*通配符
CORS(app, resources={
    r"/runExcel": {
        "origins": "https://你的前端域名.com",
        "methods": ["POST", "OPTIONS"],
        "allow_headers": ["Content-Type", "Authorization"],
        "supports_credentials": True  # 需携带cookie/认证信息时开启
    }
})

@app.route('/runExcel', methods=['POST', 'OPTIONS'])  # 显式支持OPTIONS预请求
def run_backtest_excel():
    if request.method == 'OPTIONS':
        # 直接返回200处理浏览器预请求
        return '', 200
    
    output = BytesIO()
    request_data = request.get_json()

    # 你的数据处理逻辑（示例）
    data = pd.DataFrame(request_data)

    with pd.ExcelWriter(output, engine='xlsxwriter') as writer:
        data.to_excel(writer, index=True, sheet_name='Sheet1')
    output.seek(0)

    # 移除手动设置的CORS header，由flask-cors自动处理
    return send_file(
        output, 
        download_name="data_detail.xlsx", 
        as_attachment=True, 
        mimetype='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    )

if __name__ == '__main__':
    app.run(debug=True, port=4000)

2. 修正前端请求的关键问题 #

你的前端代码存在两个触发CORS错误的潜在问题，需同步修改：

// 先确保请求函数是异步实现（基于fetch示例）
const StrategyExcelFetcher = async (url, data) => {
    return fetch(`https://${url}`, {  // 补全协议头（http/https）
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // 需携带认证头时添加：'Authorization': `Bearer ${你的token}`
        },
        body: JSON.stringify(data),
        credentials: 'include'  // 需携带cookie时开启
    }).then(res => {
        if (!res.ok) throw new Error('请求失败');
        return res.blob();  // 处理文件类型响应
    });
};

const exportFile = async() => {
    try{
        const result = await StrategyExcelFetcher("example.com/runExcel", backtestFormBody);
        // 补充文件下载逻辑
        const url = window.URL.createObjectURL(result);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'data_detail.xlsx';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
        
        console.log(backtestFormBody);
    } catch(error) {  // 需接收error参数
        console.log(error);
    }
};

3. 排查Nginx配置冲突 #

如果应用通过Nginx反向代理，不要同时在Nginx和Flask中重复设置CORS header。建议保留Flask的精准配置，Nginx侧仅做请求转发即可，避免重复header导致浏览器报错。

内容的提问来源于stack exchange，提问作者駱立軒