Flask+JS+HTML处理文件输入时遭遇400 Bad Request错误

问题根源分析 #

你的代码里存在几个关键问题，直接导致了400错误的出现：

• 路由定义语法错误：Flask路由配置有两处错误：

  • 把参数分隔的逗号写成了点号：@app.route('/submit'. method=['POST']) 应改为逗号分隔
  • 请求方法参数应为复数 methods，而非单数 method
    这个错误会让路由无法正确识别POST请求，直接返回400错误。

• 文件名验证逻辑缺陷：判断文件后缀时，yaml_file.filename.endswith('yaml') 缺少了前缀点号，正确的验证应该是匹配 .yaml 后缀，否则会出现误判。

• JS调试输出无效：catch块里的错误输出语句 ('There was an error!', error); 没有实际执行逻辑，无法在控制台查看错误详情，不利于调试。

修正后的代码片段 #

Python Flask代码 #

import os
from flask import Flask, request, jsonify

app = Flask(__name__)

def save_file(file, path):
    try:
        os.makedirs(os.path.dirname(path), exist_ok=True)
        file.save(path)
    except Exception as e:
        raise RuntimeError(f"Failed to save file {file.filename}: {str(e)}")

@app.route('/submit', methods=['POST'])  # 修正逗号和methods复数问题
def submit_files():
    files = request.files
    try:
        yaml_file = files['inputYaml']
        # 修正后缀验证逻辑，添加点号
        if yaml_file and yaml_file.filename.endswith('.yaml'):
            save_file(yaml_file, '/path/to/where/it/needs/to/be/saved')
        else:
            return jsonify({'error': 'Invalid YAML file'}), 400
        # 处理其他文件（如果需要）
        return jsonify({'success': 'File uploaded successfully'}), 200
    except KeyError:
        return jsonify({'error': 'No file uploaded'}), 400
    except Exception as e:
        return jsonify({'error': str(e)}), 500

JavaScript代码 #

var userInputYamlForm = document.getElementById('userInputYaml');

userInputYamlForm.addEventListener('submit', function(event) {
   event.preventDefault();
   var formData = new FormData(this);
   sendDataToFlask('/submit', formData);
});

function sendDataToFlask(url, data) {
   fetch(url, {
      method: 'POST',
      body: data
   }).then(response => {
      if (!response.ok) {
         throw new Error('Network response was not ok');
      }
      return response.json();
   }).then(data => {
      showPopup();
   }).catch(error => {
      console.log('There was an error!', error);  // 修正错误输出逻辑
   });
}

内容的提问来源于stack exchange，提问作者Ed-Ryan