Flask中JavaScript无法获取Session变量的问题排查

核心问题分析 #

1. Session Cookie共享限制：同一浏览器同域名下，所有标签页共享同一个Session Cookie，一个标签页修改session['sel_analysis']后，其他标签页的Session会同步更新，但页面DOM不会自动刷新，提交时就会用最新的Session值，造成数据保存错误。
2. API请求的Session获取失败：CORS配置存在冲突（Access-Control-Allow-Origin: *与supports_credentials=True不能共存），加上Fetch请求路径的跨域隐患、async函数的异步处理错误，导致无法正确获取Session值。

步骤1：修复Flask API的CORS与Session配置 #

修改Flask代码，统一通过CORS扩展配置，避免跨域Cookie传递失败，同时简化Session取值逻辑：

from flask import Flask, session, request, jsonify, render_template
from flask_cors import CORS

app = Flask(__name__)
app.config['SECRET_KEY'] = "Very secret"
# 配置CORS，允许凭证传递，并限制Origin为当前站点（*与credentials冲突，需指定具体域名/端口）
CORS(app, supports_credentials=True, origins=["http://localhost:5000"])  # 替换为你的实际站点地址

@app.route('/edit', methods=['GET', 'POST'])
def edit():
    global systems_obj_list
    sel_analysis = None
    # 用get方法避免KeyError，无需额外try-except
    session_analysis = session.get("sel_analysis")
    if session_analysis:
        for s in systems_obj_list:
            if s == session_analysis:
                sel_analysis = s
    # 注意：原代码返回变量名存在笔误，需确保selected_system与sel_analysis一致
    return render_template('edit.html', systems=systems_obj_list, selected_system=sel_analysis)

@app.route('/api/get-session-analysis', methods=['GET'])
def get_session_analysis():
    # 直接用get设置默认空字符串，简化逻辑
    sys = session.get("sel_analysis", "")
    print(sys)
    return jsonify({"analysis": sys})

步骤2：修正JavaScript的Fetch请求与异步逻辑 #

解决async函数的异步处理问题，使用相对路径避免跨域，确保正确获取Session值：

async function getSessionAnalysis() {
    try {
        const response = await fetch('/api/get-session-analysis', {
            method: 'GET',
            credentials: 'same-origin'  // 确保请求携带Session Cookie
        });
        const data = await response.json();
        return data.analysis || "";
    } catch (error) {
        console.error('获取Session失败:', error);
        return "";
    }
}

步骤3：修复标签页焦点检测逻辑 #

在页面获取焦点时实时请求最新Session，而非仅初始化一次，同时处理async函数的异步结果：

{% if selected_system != None %}
<script>
    // 获取当前页面显示的选中项
    const currentSelected = $('#p_sel_sys').text().replace("Currently selected analysis:  ", "").trim();

    // 封装检测刷新逻辑为async函数
    async function checkAndReload() {
        const sessionAnalysis = await getSessionAnalysis();
        // 比对当前显示项与最新Session值
        if (currentSelected !== sessionAnalysis) {
            console.log("Session已更新，刷新页面");
            location.reload();
        }
    }

    // 页面加载完成后执行首次检测
    window.addEventListener('load', checkAndReload);
    // 页面获取焦点时执行检测
    window.addEventListener('focus', checkAndReload);
</script>
{% endif %}

额外优化建议 #

1. 避免全局变量：global systems_obj_list可能导致多用户场景下的数据冲突，建议将系统列表存储到数据库、用户Session或配置文件中。
2. Session初始化：在用户首次访问时主动初始化session['sel_analysis']，避免潜在的KeyError。
3. 表单提交前二次验证：在表单提交时再次调用getSessionAnalysis()，确认当前选中项与Session一致，防止页面刷新前的误提交。

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