React前端向Flask后端发送POST请求并接收返回数据的方法

问题概述 #

我正在向后端路由/stat发送用户ID，希望在该路由中执行以用户ID为参数的数据库查询，并将查询结果返回至前端展示数值。目前已能实现发送数据的POST请求，但不知道如何编写代码以同时获取返回数据。

当前代码 #

前端POST请求代码 #

const postData = (username) => {
          try {
              let result = fetch('http://127.0.0.1:5000/stat', {
                  credentials: 'include',
                  method: 'POST',
                  mode: 'no-cors',
                  headers: {
                      'Accept': 'application/json',
                      'Content-Type': 'application/json',

                  },
                  body: JSON.stringify({
                      user: username
                  })
              });
          } catch(e) {
              console.log(e)
          }
    }

后端/stat路由代码 #

@app.route('/stat', methods=['GET', 'POST'])
def stats():
  request_data = request.get_json()
  user = request_data['user']
  def get_total_percent_correct(user):
    correct = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE guess = answer AND user_id = %s' % user)
    total = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE user_id = %s' % user)
    return float(correct[0][0])/float(total[0][0])

  response_body = {
        "totalAccuracy": get_total_percent_correct(user),
        "user" : user
    }
  return response_body

问题分析与修改方案 #

前端代码修改要点 #

1. 移除mode: 'no-cors'：这个模式会限制浏览器读取响应内容，完全无法获取后端返回的数据，必须删除。
2. 处理fetch的异步响应：fetch返回的是Promise，需要用await（配合async函数）或者.then()链式调用才能解析响应。

修改后的前端代码：

// 改为async函数，使用await处理异步操作
const postData = async (username) => {
    try {
        const response = await fetch('http://127.0.0.1:5000/stat', {
            credentials: 'include',
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                user: username
            })
        });
        // 解析JSON格式的响应
        const result = await response.json();
        // 在这里处理返回的数据，比如展示到页面
        console.log('获取到的统计数据:', result);
        return result;
    } catch(e) {
        console.error('请求出错:', e);
    }
}

后端代码优化要点 #

1. 用jsonify返回JSON响应：Flask直接返回字典虽然会自动转JSON，但使用jsonify能确保响应头的Content-Type正确设置为application/json，避免前端解析出错。
2. 修复SQL注入风险：直接用%s拼接SQL语句存在注入漏洞，应该使用参数化查询（适配你的数据库驱动参数传递格式）。
3. 增加异常处理：避免用户ID为空、答题记录为空导致的除以0错误。

修改后的后端代码：

from flask import jsonify  # 需要导入jsonify

@app.route('/stat', methods=['POST'])  # 仅保留POST方法即可
def stats():
    request_data = request.get_json()
    user = request_data.get('user')  # 用get方法避免key不存在报错
    if not user:
        return jsonify({'error': '用户ID不能为空'}), 400

    def get_total_percent_correct(user):
        # 使用参数化查询，防止SQL注入
        correct = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE guess = answer AND user_id = %s', (user,))
        total = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE user_id = %s', (user,))
        if total[0][0] == 0:
            return 0.0  # 避免除以0的错误
        return float(correct[0][0])/float(total[0][0])

    response_body = {
        "totalAccuracy": get_total_percent_correct(user),
        "user" : user
    }
    return jsonify(response_body)  # 使用jsonify返回标准JSON响应

额外注意事项 #

• 如果前后端不在同一域名下，需要配置CORS跨域支持，可以使用Flask的flask-cors扩展快速实现。
• 前端调用postData时，可以直接获取返回结果用于页面渲染，例如：postData('testUser').then(data => { document.getElementById('accuracy').textContent = data.totalAccuracy; })。

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