Flask接收XMLHttpRequest的POST请求时返回400错误求助

核心错误原因 #

1. 后端逻辑顺序错误：代码进入order函数后立即执行newOrder(request.form["json"])，未区分请求方法。当发起GET请求时，request.form中不存在json字段，Flask访问不存在的表单键会直接返回400 Bad Request。
2. 前端POST请求未设置Content-Type：发送表单格式数据时未指定Content-Type: application/x-www-form-urlencoded，可能导致Flask无法正确解析请求体中的参数。
3. 删除逻辑存在隐患：前端通过e.parentElement.childNodes[2]获取目标名称时，会包含文本节点的空白内容，导致删除判断失效。

修复后的后端代码 #

from flask import Flask, request, render_template, unquote
import json

app = Flask(__name__)
orders = []  # 初始化订单列表

def newOrder(data):
    # 这里编写你的newOrder业务逻辑
    pass

@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":
        # 先检查json字段是否存在，避免触发KeyError
        if "json" in request.form and request.form["json"].strip() != "":
            orders = json.loads(unquote(request.form["json"]))
        return ""
    # 处理不允许的请求方法
    return "Method Not Allowed", 405

# 补充返回订单JSON的路由（需确保该路由存在）
@app.route("/json", methods=["GET"])
def get_order_json():
    return json.dumps(orders)

修复后的前端JavaScript代码 #

function del(e) {
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = function () {
        var json = JSON.parse(this.responseText);
        var newJson = [];
        // 修复目标名称获取方式，去除空白字符
        const targetName = e.parentElement.childNodes[2].textContent.trim();
        for (var i = 0; i < json.length; i++) {
            if (json[i]["name"] !== targetName) {
                newJson.push(json[i]);
            }
        }
        const postXhr = new XMLHttpRequest();
        postXhr.open("POST", "/orders");
        // 设置Content-Type，确保Flask能解析表单数据
        postXhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // 使用encodeURIComponent更彻底地编码JSON字符串
        postXhr.send("json=" + encodeURIComponent(JSON.stringify(newJson)));
        // 请求完成后刷新页面更新列表（可选）
        postXhr.onload = function() {
            if (this.status === 200) {
                window.location.reload();
            }
        }
    }
    xmlhttp.open("GET", "/json");
    xmlhttp.send();
}

关键修复点说明 #

• 后端：调整逻辑顺序，仅在POST请求时处理表单数据，同时增加字段存在性检查，避免触发400错误。
• 前端：添加Content-Type请求头，使用encodeURIComponent确保JSON字符串编码正确，修复目标名称的获取方式保证删除逻辑有效。
• 额外建议：避免用全局变量orders存储数据，服务器重启后数据会丢失，建议改用文件或数据库做持久化存储。

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