如何通过按钮或Java向Flask发起POST请求及后端数据获取异常排查

一、分场景实现向Flask发起POST请求 #

（一）前端按钮触发POST请求 #

核心实现步骤：

• 获取目标按钮的DOM节点，绑定点击事件回调
• 初始化XMLHttpRequest实例，配置POST请求地址、异步标识
• 按照约定的参数格式组装请求体，通过send方法发送内容
• 监听请求状态变化，处理Flask返回的响应结果
  如果需要传递JSON格式参数，可将请求头设置为application/json，对参数做序列化后发送；如果传递表单格式参数，设置请求头为application/x-www-form-urlencoded，按键值对拼接请求内容即可。

（二）Java端触发POST请求 #

核心实现步骤：

• 基于HttpURLConnection或OkHttp等客户端组件，创建指向Flask接口的连接实例
• 设置请求方法为POST，按照约定格式配置请求头的Content-Type
• 将待传递的参数写入请求输出流，完成请求发送
• 读取Flask返回的响应流，处理业务返回结果

二、当前Flask无法获取请求数据的问题排查 #

核心问题集中在参数传递与读取的不匹配，具体原因和修正方式如下：

核心错误定位 #

1. 前端传参写法无效：当前代码中r.send(input="test")属于错误写法，XMLHttpRequest.send()方法仅接收请求体字符串作为参数，这种类赋值的写法既不会生成合法的参数字符串，部分场景下还会将未定义的JS变量值作为请求体发送，Flask自然无法识别有效参数。
2. 后端读取参数的方式错误：Flask中request.args.get()方法仅能读取URL路径拼接的查询字符串参数（比如http://127.0.0.1:5000/truthMask?input=test里的input值），无法读取POST请求携带的请求体内容，哪怕前端正确发送了表单格式的参数，用这个方法也会读不到值。

修正后的完整实现 #

前端JS修正代码

document.getElementById("sendbutton").addEventListener('click', () => {
    const image = canvas.toDataURL();
    const r = new XMLHttpRequest();
    r.open("POST", "http://127.0.0.1:5000/truthMask", true);
    // 配置请求头，声明请求体为表单格式
    r.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    r.onreadystatechange = function () {
        if (r.readyState !== 4 || r.status !== 200) return;
        console.log("请求发送完成，后端返回：", r.responseText);
    };
    // 按格式拼接请求体，特殊字符做编码处理
    r.send(`input=test&image=${encodeURIComponent(image)}`);
});

Flask后端修正代码

@app.route('/truthMask', methods=['POST'])
def set_truthMask():
    print("Got the data")
    # 读取POST请求体里的表单格式参数
    input_val = request.form.get("input")
    image_val = request.form.get("image")
    print(f"打印接收到的input数据：{input_val}")
    return "sent"

其他排查注意事项 #

• 如果需要传递JSON格式参数，前端需将请求头改为application/json，发送的请求体为JSON.stringify({input: "test"})，对应Flask后端需通过request.get_json()方法解析JSON内容，不能再用request.form读取
• 如果浏览器控制台报CORS跨域报错，说明请求未正常送达Flask服务，需要在Flask端配置跨域允许规则，或将前端页面部署到与Flask同域名下消除跨域限制
• 可在接口入口添加print(request.headers, request.get_data())代码，打印接收到的原始请求头和请求体内容，直观核对前端实际发送的参数格式，快速定位不匹配问题

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