从JavaScript调用Python API失败，报500内部服务器错误

问题根源分析 #

你的500错误完全来自Python后端代码，主要有以下几个问题：

1. GET请求无法获取表单数据：你在get_data函数里实例化了loginForm()，但GET请求不会携带表单提交的数据，form.username.data会是空值，导致User.query.filter_by(...)查询不到用户，返回None。后续尝试访问None.javascriptOwner会直接抛出AttributeError，触发服务器500错误。
2. 字典键重复：data字典里"ownsPython"键重复定义，后面的会覆盖前面的，虽然这不会导致500，但属于无效代码。
3. JS代码语法错误：await关键字必须在async函数内部使用，你把包裹的async function fetchdata()注释掉了，直接执行await会触发语法错误，不过这不是你当前看到的500错误的原因，但必须修复才能正常请求。

修复方案 #

1. 修复Python后端代码 #

修改app.py，从GET请求参数中获取用户名，同时处理用户不存在的情况：

from flask import request, jsonify  # 确保导入所需模块

@app.route('/api/get_data', methods=['GET'])
def get_data():
    # 从URL参数中获取用户名（GET请求的参数会附在URL后）
    username = request.args.get('username')
    
    # 检查用户名是否存在
    if not username:
        return jsonify({"error": "缺少username参数"}), 400
    
    # 查询用户，处理用户不存在的情况
    user = User.query.filter_by(username=username).first()
    if not user:
        return jsonify({"error": "用户不存在"}), 404
    
    # 修复重复键，确保字段名和User模型一致
    data = {
        "ownsPython": str(user.pythonOwner),
        "ownsJava": str(user.javaOwner),  # 修正原代码中字段名的逻辑错误
        "ownsJavascript": str(user.ownsJavascript)
    }
    return jsonify(data)

2. 修复前端JS代码 #

恢复async函数包裹await逻辑，并在请求中携带username参数：

async function fetchdata() {
    try {
        // 替换成实际用户名，或从页面输入中动态获取
        const username = "test_user";
        const response = await fetch(`http://127.0.0.1:5000/api/get_data?username=${username}`);
        
        // 主动检查响应状态，非200时抛出错误
        if (!response.ok) {
            throw new Error(`请求失败，状态码：${response.status}`);
        }
        
        const data = await response.json();
        console.log('Data:', data);
    } catch (error) {
        console.error('Error:', error);
    }
}
fetchdata();

验证方法 #

1. 启动Flask服务器，直接在浏览器访问http://127.0.0.1:5000/api/get_data?username=你的测试用户名，查看返回的JSON是否正常。
2. 运行修复后的JS代码，查看控制台是否输出正确数据，而非500错误。

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