Flask生成器(yield)分批返回数据时遭遇CORS跨域错误求助

问题背景 #

前端发起单次请求，期望Flask后端通过generator分批返回10万条数据，但触发CORS错误：

labeling:1 Access to XMLHttpRequest at 'http://0.0.0:3000/fetch_list' from origin 'http://0.0.0.3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

核心需求：单次请求内，后端逐个返回列表元素（如10个元素分10次返回响应片段）。

现有代码问题分析 #

前端问题 #

1. awaitaxios 拼写错误，应为 await axios
2. URL 存在语法错误：http://0.0.0:3000}/fetch_list 多了闭合大括号，需改为 http://0.0.0.0:3000/fetch_list
3. 普通axios.get会等待完整响应返回，无法接收流式分片数据

后端问题 #

1. jsonify会生成完整Response对象，不能直接在yield中使用，需手动序列化为JSON字符串
2. num是普通整数，不存在flatten().tolist()方法（该方法属于numpy数组）
3. 流式响应需指定适配的内容类型，方便前端逐段解析

修复后的代码 #

前端代码（流式接收实现） #

const fetchNumbers = async () => {
    try {
        const response = await fetch('http://0.0.0.0:3000/fetch_list');
        if (!response.ok) throw new Error('请求失败');
        
        const reader = response.body.getReader();
        const decoder = new TextDecoder('utf-8');
        
        while (true) {
            const { done, value } = await reader.read();
            if (done) break;
            
            // 按换行分割分片数据，逐行解析JSON
            const chunks = decoder.decode(value).split('\n');
            chunks.forEach(chunk => {
                if (chunk.trim()) {
                    const data = JSON.parse(chunk);
                    console.log('收到数据:', data);
                }
            });
        }
    } catch (error) {
        console.error('错误:', error);
    }
};

后端代码（流式响应+跨域修复） #

先确保安装依赖：

pip install flask-cors

修改后的Flask代码：

from flask import Flask, Response, json
from flask_cors import cross_origin

app = Flask(__name__)

@app.route('/fetch_list')
@cross_origin(origin="*", methods=["GET"], headers=["Content-Type"])
def generate_numbers():
    print("Generate_numbers 方法被调用")
    numbers = range(1, 100001)  # 用range节省内存，避免一次性生成大列表
    
    def generate():
        print("开始生成数据")
        for num in numbers:
            # 手动序列化JSON并添加换行符，作为分片分隔标记
            yield json.dumps({'number': num}) + '\n'
            print(f"已发送: {num}")
    
    # 使用JSON Lines格式，适配流式解析
    return Response(generate(), content_type='application/x-ndjson')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=3000, debug=True)

关键说明 #

1. 跨域修复：确保@cross_origin装饰器参数完整，指定允许的请求方法和头，同时确认flask-cors依赖正确安装
2. 流式响应逻辑：后端通过yield返回带换行符的JSON字符串，前端利用ReadableStream逐段读取并解析
3. 内存优化：用range替代列表生成式，避免一次性创建10万元素的列表占用过多内存

内容的提问来源于stack exchange，提问作者ApENg