表单提交经Node.js调用Flask API写MySQL时JSON错误如何解决

• Flask侧的TypeError: 'NoneType' object is not subscriptable：你调用request.get_json()时，请求没有携带JSON格式的参数，导致该方法返回None，后续对None执行取下标操作直接报错。
• 没有携带参数的原因有两个：
  1. 前端表单的输入框属性写错：你给input加的是firstname="firstname"、lastname="lastname"，表单提交时只会识别name属性对应的字段，没有name属性的输入框值不会被提交，NodeJS侧收不到两个字段的内容。
  2. NodeJS侧调用axios发POST请求时，没有将前端提交的表单参数传递给Flask接口，也没有指定请求头为JSON格式，Flask自然解析不到有效参数。
• 额外问题：你当前用字符串拼接SQL语句的写法存在SQL注入风险，需要替换为参数化查询。

1. 修复前端表单 #

将input的自定义属性替换为标准name属性，同时修正多余的嵌套form结构：

<div class="superhero">
    <h1>填写名字</h1>
    <form action="/add_people" method="post">
        <input type="text" name="firstname" placeholder="请输入名">
        <h1>填写姓氏</h1>
        <input type="text" name="lastname" placeholder="请输入姓">
        <input type="submit" class="btn btn-primary">
    </form>
</div>

2. 修复NodeJS路由 #

首先确保你已经配置了express的表单解析中间件，再将获取到的表单参数传递给Flask接口：

// 这段配置要放在所有路由定义之前，用来解析表单提交的参数
app.use(express.urlencoded({ extended: true }))

app.post('/add_people', function(req, res){
    // 把表单拿到的参数、JSON格式请求头一起传给Flask接口
    axios.post('http://127.0.0.1:5000/api/adduser', {
        firstname: req.body.firstname,
        lastname: req.body.lastname
    }, {
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then((response)=>{
        console.log(response.data);
        // 跳转感谢页逻辑写在这里
        res.redirect('/thanks')
    })
    .catch(err => {
        console.error('请求Flask接口失败', err)
        res.status(500).send('提交失败')
    })
});

3. 修复Flask接口 #

先加参数非空判断，再把SQL拼接改为参数化查询：

@app.route('/api/adduser', methods = ['POST'])
def adding_stuff():
    request_data = request.get_json()
    # 提前校验参数是否存在，避免空值报错
    if not request_data or 'firstname' not in request_data or 'lastname' not in request_data:
        return '参数缺失', 400
    new_fname = request_data['firstname']
    new_lname = request_data['lastname']
    conn = create_connection("", "", "", "")
    # 替换为参数化查询，不要用字符串拼接，避免SQL注入
    sql = "INSERT INTO restaurantusers (firstname, lastname) VALUES (%s, %s)"
    execute_query(conn, sql, (new_fname, new_lname))
    return 'Post worked'

注意：如果你的execute_query方法之前只支持接收两个参数，需要修改方法逻辑，支持传入参数元组，以pymysql为例，执行逻辑为cursor.execute(sql, 参数元组)。

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