如何通过Axios GET请求传递参数并在Flask后端接收？

问题核心是前后端参数传递方式不匹配：后端路由定义的是URL路径参数（/stat/<user>/<flashcard_id>），但前端Axios请求用的是URL查询参数（?user=0&flashcard_id=1），导致后端路由无法匹配，返回404。

下面提供两种修复方案，选择其一即可：

方案一：修改前端请求，使用路径参数传递 #

将Axios的URL改成包含user和flashcard_id的路径形式，不再依赖params字段传递参数：

async function getStatsData() {
    const userId = 0;
    const flashcardId = 1;
    // 直接将参数拼接进URL路径
    const req = axios.get(`http://127.0.0.1:5000/stat/${userId}/${flashcardId}`, {
        headers: {'X-Requested-With': 'XMLHttpRequest'},
    })
    const res = await req;
    return res.data.results.map((statsItem, index) => {
        return {
            stat1: statsItem.stat1,
            stat2: statsItem.stat2,
            stat3: statsItem.stat3,
            stat4: statsItem.user,
            key: statsItem.key
        }
    })
}

注意：前端无需设置Access-Control-Allow-Origin头，该头是后端返回给前端的响应头，前端设置无效。

方案二：修改后端路由，接收查询参数 #

如果想保留前端用查询参数的方式，修改Flask路由为从request.args中获取参数，不再使用路径参数：

from flask import request

@app.route('/stat/', methods=['GET', 'OPTIONS'])
def stats():
    # 从URL查询参数中获取user和flashcard_id
    user = request.args.get('user')
    flashcard_id = request.args.get('flashcard_id')
    
    # 增加参数校验，避免空值导致错误
    if not user or not flashcard_id:
        return {"response_code": 400, "message": "参数缺失"}, 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,))[0][0]
        total = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE user_id = %s', (user,))[0][0]
        try:
            return round(float(correct)/float(total),3)*100
        except:
            return 0
  
    def get_percent_correct_for_flashcard(user,flashcard_id):
        total = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE user_id = %s AND flashcard_id = %s', (user, flashcard_id))[0][0]
        correct = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE flashcard_id = %s AND guess = answer AND user_id = %s', (flashcard_id, user))[0][0]
        try:
            return round(float(correct)/float(total),3)*100
        except:
            return 0

    def get_stats_for_flashcard(user_id, flashcard_id):
        attempts = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE user_id = %s AND flashcard_id = %s', (user_id, flashcard_id))[0][0]
        correct = d.db_query('SELECT COUNT(*) FROM cards.responses WHERE flashcard_id = %s AND guess = answer AND user_id = %s', (flashcard_id, user_id))[0][0]
        missed = attempts - correct
        return attempts, correct, missed
  
    data = [{
        "stat1": get_total_percent_correct(user),
        "stat2": get_percent_correct_for_flashcard(user, flashcard_id),
        'stat3': get_stats_for_flashcard(user, flashcard_id),
        'user': user,
        'key':999
    }]

    return {"response_code" : 200, "results" : data}

重要补充说明 #

1. 跨域（CORS）处理：如果前端和后端存在跨域问题，后端需要安装并配置Flask-CORS：

   pip install flask-cors
   

   然后在Flask应用中初始化：

   from flask_cors import CORS
   app = Flask(__name__)
   CORS(app)  # 生产环境可配置具体允许的域名，避免开放所有来源
   

2. SQL注入风险：原始代码中直接用字符串拼接SQL语句，存在严重安全隐患！必须改用参数化查询，上述两种方案的后端代码都已修正这一点，请务必遵循该规范。

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