React前端通过axios提交表单后Flask获取name值为空如何解决

根本原因 #

核心问题是前后端请求数据格式不匹配：

• axios默认post请求发送的是application/json格式的JSON负载
• 你的Flask后端用的request.form仅能解析application/x-www-form-urlencoded或multipart/form-data格式的表单数据，因此无法读取到前端传的参数，返回空字符串。

排查方法 #

检查axios调用是否成功 #

• 打开浏览器开发者工具（按F12唤起），切换到「网络」面板，点击表单提交按钮，找到路径为/post的请求记录：
  • 查看请求状态码是否为200，确认请求是否成功送达后端
  • 查看「请求头」中的Content-Type字段，默认应为application/json;charset=utf-8
  • 查看「载荷」/「请求体」标签页，确认你要发送的name值是否正确填充到请求中
• 后端可临时添加日志打印request.data和request.is_json，确认原始请求数据是否成功到达后端，以及请求格式是否为JSON

两种修复方案，任选其一即可 #

方案1：修改Flask后端，适配JSON格式请求 #

调整后端参数读取逻辑，从JSON负载中取参数：

from flask import request, jsonify

@app.route('/post',methods=['POST'])
def testPost():
    # 兼容JSON和表单两种请求格式
    name = request.json.get("name","") if request.is_json else request.form.get("name","")
    print(name)
    return jsonify(name=name)

方案2：修改前端axios请求，发送表单格式数据 #

如果要保持后端request.form的写法，前端将数据转为FormData格式即可：

formLogin = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('name', document.getElementById("name").value);
    axios
       .post('http://localhost:5000/post', formData)
       .then((res) => {
            console.log(res.data)
        })
        // 新增异常捕获，方便排查跨域、后端报错等问题
       .catch(err => {
            console.error('请求出错：', err)
        });
}

补充优化建议 #

• 你当前form标签上的method和action属性可以删除，你已经通过e.preventDefault()阻止了默认提交行为，保留这两个属性容易引发意料之外的表单跳转
• React开发中不推荐直接用document.getElementById读取表单值，建议使用受控组件绑定state的方式获取输入值，代码可维护性更高
• 所有axios请求建议都添加catch异常捕获逻辑，遇到跨域、接口报错等问题时可以直接在控制台看到错误信息

内容的提问来源于stack exchange，提问作者Justin Philip Fulkerson