Flask中使用JS的await fetch调用接口异常：400错误及'Request'对象无'is_xhr'属性问题求助

我来一步步帮你拆解你遇到的几个问题：

1. 初始代码的400 Bad Request错误 #

你的JavaScript代码对fetch的使用存在核心错误，同时后端也缺少关键配置：

• 前端错误：fetch返回的是一个Response对象，不是直接的JSON数据。你需要先调用.json()方法解析响应体，这个方法本身也是异步的，必须搭配await使用。
• 后端潜在问题：Flask的session必须配置SECRET_KEY才能正常工作，如果没设置，当你尝试访问session[NAME_KEY]时会触发内部错误，直接返回400状态码。

2. 移除await后出现的'Request' object has no attribute 'is_xhr'错误 #

这个错误是Flask与Werkzeug（Flask依赖的WSGI工具库）的版本兼容性问题导致的：Werkzeug从2.0版本开始移除了request.is_xhr属性，而旧版Flask可能依赖这个属性。降级到Werkzeug 0.16.1确实能临时解决，但更推荐升级Flask到兼容新版本Werkzeug的版本（比如Flask 2.0+），从根源上避免这类问题。

3. 降级Werkzeug后无返回、无日志的问题 #

这依然是前端fetch的使用错误导致的：

• 你直接把fetch("/getName")赋值给dictionary，此时dictionary是一个Promise对象，不是后端返回的JSON数据，所以dictionary.name必然是undefined。
• 更关键的是，因为你没有用await或者.then()处理这个Promise，浏览器可能在请求完成前就跳过了后续逻辑，甚至可能因为Promise未被妥善处理导致请求根本没发送到后端，所以后端的print("hello")也没有执行。

前端JavaScript代码（正确使用fetch） #

// 封装成异步函数处理请求流程
async function getUserName() {
    try {
        const response = await fetch("/getName");
        // 先检查响应状态是否正常
        if (!response.ok) {
            throw new Error(`请求失败！状态码：${response.status}`);
        }
        const dictionary = await response.json(); // 解析JSON格式的响应体
        const user_name = dictionary.name;
        console.log("获取到的用户名：", user_name);
        return user_name;
    } catch (error) {
        console.error("请求出错：", error);
    }
}

// 调用函数触发请求
getUserName();

后端Flask代码（添加SECRET_KEY配置） #

from flask import Flask, session, jsonify

app = Flask(__name__)
# 必须设置SECRET_KEY才能使用session，值可以是任意随机字符串
app.secret_key = 'your_random_secret_key_here'  # 替换成你自己的随机密钥

NAME_KEY = 'user_name'  # 确保这个常量在前后端一致

@app.route("/getName")
def getName():
    output = {"name": ""}
    print("hello")
    if NAME_KEY in session:
        output["name"] = session[NAME_KEY]
        print(output)
    return jsonify(output)

if __name__ == '__main__':
    app.run(debug=True)

• 确保你已经在某个逻辑中给session[NAME_KEY]赋值过（比如用户登录时），否则返回的name会是空字符串。
• 如果前端和后端是跨域部署的（比如前端在localhost:3000，后端在localhost:5000），需要在Flask中配置CORS：安装flask-cors库后，添加from flask_cors import CORS; CORS(app)即可。
• 尽量避免降级Werkzeug，升级Flask到最新稳定版能获得更好的兼容性、新特性和安全修复。

内容的提问来源于stack exchange，提问作者Heidar-An