Flask 400 错误排查：正确使用 FormData 提交表单数据

flask 接收 xmlhttprequest 的 post 请求时返回 400 错误，通常因请求体格式不匹配 `request.form` 解析要求所致；本文详解如何通过 `formdata` 正确构造请求，并修正后端数据解析逻辑。

在 Flask 中，request.form 仅能解析 application/x-www-form-urlencoded 或 multipart/form-data 类型的请求体。而原始 javaScript 代码中使用 xmlhttp.send(“json=” + encodeURI(…)) 发送的是纯文本（text/plain）请求体，Flask 无法将其自动解析为 form 字典，因此访问 request.form[“json“] 会触发 400 Bad Request —— 这是 Flask 的默认安全行为，防止无效或恶意表单提交。

✅ 正确做法是使用 FormData 对象封装数据，它会自动设置合适的 Content-Type（如 multipart/form-data; boundary=…），并确保数据被 Flask 正确识别为表单字段：

function del(e) {     const xmlhttp = new XMLHttpRequest();     xmlhttp.onload = function () {         if (this.status !== 200) return;         try {             const json = JSON.parse(this.responseText);             const newJson = json.filter(item => item.name !== e.parentElement.childnodes[2].textContent);              const postReq = new XMLHttpRequest();             postReq.open("POST", "/orders");             const formData = new FormData(); // ✅ 创建 FormData 实例             formData.append("json", json.stringify(newJson)); // ✅ 自动编码，无需手动 encodeURI             postReq.send(formData); // ✅ 自动设置 Content-Type 并发送         } catch (err) {             console.error("JSON 处理失败:", err);         }     };     xmlhttp.open("GET", "/json");     xmlhttp.send(); }

⚠️ 同时，后端 Flask 路由也需优化以增强健壮性：

• 避免直接访问 request.form[“json”]（可能 KeyError）；
• 区分 GET/POST 逻辑，避免在 GET 分支中误执行 POST 相关操作；
• 使用 request.form.get() 安全取值，并校验数据有效性；
• 移除全局变量 global orders（非线程安全，不推荐用于生产）；
• 返回明确响应（如 return “OK” 或 jsonify({“status”: “success”})），便于前端调试。

优化后的 Flask 路由示例：

from flask import Flask, request, render_template, jsonify import json from urllib.parse import unquote  @app.route("/orders", methods=["POST", "GET"]) def order():     global orders  # ⚠️ 仅用于演示；生产环境请改用数据库或线程安全缓存      if request.method == "GET":         return render_template("orders.html", orders=orders)      elif request.method == "POST":         # 安全获取 form 数据         json_str = request.form.get("json")         if not json_str:             return "Missing 'json' field", 400          try:             parsed_data = json.loads(json_str)  # ✅ 直接解析 JSON 字符串             orders = parsed_data             return jsonify({"status": "success", "count": len(orders)})         except (json.JSONDecodeError, TypeError) as e:             return f"Invalid JSON: {e}", 400

? 关键总结：

• 前端必须用 FormData（而非字符串拼接）发送表单数据，才能被 request.form 正确读取；
• 后端应始终校验 request.form.get() 返回值，并捕获 JSON 解析异常；
• 避免在 GET 和 POST 共享逻辑中重复访问 request.form，防止 400 错误扩散；
• 开发阶段可启用 Flask 调试模式（app.run(debug=True)）查看详细错误日志，快速定位问题根源。