ML项目Web应用错误数据处理异常：页面400但日志返回200

我正在开发一个机器学习项目Web应用，核心功能如下：

• 接收学生成绩CSV文件
• 运行多种ML算法，选择并保存R2分数最优的模型（会替换旧模型）
• 向用户展示最优模型的R2分数

正常数据下应用运行完全正常，但在添加错误数据异常处理时，测试缺失列的CSV文件出现矛盾现象：

• 后端日志显示模型训练完成，且返回200 OK状态码
• 前端页面却显示400 Bad Request错误，既不展示R2分数，也无任何错误提示信息

需要解决该异常，实现正确展示R2分数或清晰错误提示的功能。

相关代码片段 #

后端CSV处理核心代码 #

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return jsonify({'error': 'No file part'}), 400
    file = request.files['file']
    if file.filename == '':
        return jsonify({'error': 'No selected file'}), 400
    if file and allowed_file(file.filename):
        try:
            df = pd.read_csv(file)
            # 检查必要列是否存在
            required_columns = ['math_score', 'reading_score', 'writing_score']
            if not set(required_columns).issubset(df.columns):
                # 此处存在逻辑错误
                train_models(df)
                return jsonify({'r2_score': best_r2}), 200
            # 正常训练流程
            best_r2 = train_models(df)
            save_best_model()
            return jsonify({'r2_score': best_r2}), 200
        except Exception as e:
            return jsonify({'error': str(e)}), 500
    else:
        return jsonify({'error': 'Invalid file type'}), 400

前端请求代码 #

async function uploadCSV(file) {
    const formData = new FormData();
    formData.append('file', file);
    try {
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });
        if (!response.ok) {
            const errorData = await response.json();
            showError(errorData.error);
        } else {
            const result = await response.json();
            showR2Score(result.r2_score);
        }
    } catch (error) {
        showError('网络请求失败');
    }
}

后端日志 #

127.0.0.1 - - [10/Oct/2024 14:35:22] "POST /upload HTTP/1.1" 200 -
模型训练完成，最优R2分数：0.87

问题截图 #

1. 定位矛盾根源：后端逻辑反转 #

从日志和状态码的矛盾来看，核心问题是列校验分支逻辑错误：当前代码在检测到缺失必要列时，反而执行训练并返回200，但实际训练过程中可能触发未捕获的异常，导致前端接收的响应体格式异常，被前端错误判定为400。

2. 修复后端核心逻辑 #

修正列校验分支，确保缺失列时直接返回400错误并携带明确信息：

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return jsonify({'error': '未上传文件'}), 400
    file = request.files['file']
    if file.filename == '':
        return jsonify({'error': '未选择文件'}), 400
    if file and allowed_file(file.filename):
        try:
            df = pd.read_csv(file)
            required_columns = ['math_score', 'reading_score', 'writing_score']
            # 修正列校验逻辑：缺失列直接返回400
            if not set(required_columns).issubset(df.columns):
                missing_cols = set(required_columns) - set(df.columns)
                error_msg = f"CSV文件缺失必要列：{', '.join(missing_cols)}"
                return jsonify({'error': error_msg}), 400
            # 正常训练流程
            best_r2 = train_models(df)
            save_best_model()
            return jsonify({'r2_score': best_r2}), 200
        except pd.errors.EmptyDataError:
            return jsonify({'error': 'CSV文件为空'}), 400
        except pd.errors.ParserError:
            return jsonify({'error': 'CSV文件格式损坏'}), 400
        except Exception as e:
            return jsonify({'error': f'服务器内部错误：{str(e)}'}), 500
    else:
        return jsonify({'error': '仅支持CSV格式文件'}), 400

3. 增强前端错误兼容性 #

避免因后端响应格式异常导致错误提示失效：

async function uploadCSV(file) {
    const formData = new FormData();
    formData.append('file', file);
    try {
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });
        let responseData = {};
        try {
            responseData = await response.json();
        } catch (e) {
            responseData.error = '服务器返回格式错误';
        }
        if (!response.ok) {
            showError(responseData.error || '请求处理失败');
        } else {
            if (typeof responseData.r2_score === 'number') {
                showR2Score(responseData.r2_score);
            } else {
                showError('未获取到有效R2分数');
            }
        }
    } catch (error) {
        showError('网络请求失败，请检查连接');
    }
}

4. 调试建议 #

• 打开浏览器开发者工具网络面板，查看实际响应的状态码和响应体，确认后端返回是否符合预期
• 在后端列校验分支添加日志打印，比如print(f"缺失列：{missing_cols}")，验证逻辑是否走到正确分支
• 测试边界场景：空CSV、格式损坏的CSV、列名大小写不匹配的CSV，确保异常处理覆盖全面

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