Flask与React前后端分离时Session跨域不生效如何解决？

核心原因 #

前后端分离部署属于跨域场景，Flask的Session默认存储在客户端Cookie中，浏览器默认不会在跨域请求中自动携带对应Cookie，且Flask端未配置跨域凭证支持也会拦截携带Cookie的请求。

第一步：Flask端配置调整 #

• 安装flask-cors依赖：pip install flask-cors
• 配置CORS跨域凭证支持，补全Session相关配置：

# 应用初始化部分补充配置
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 必须配置SECRET_KEY才能正常使用Session功能
app.config['SECRET_KEY'] = '替换为你自己的随机密钥字符串'
# 配置允许前端地址跨域，同时开启凭证支持，地址替换为你实际的React前端访问地址
CORS(app, supports_credentials=True, origins=["http://localhost:3000"])
# Session Cookie配置，开发环境用Lax，生产环境可设为None同时开启SESSION_COOKIE_SECURE
app.config['SESSION_COOKIE_SAMESITE'] = 'Lax'

• 修复现有代码错误：
  1. 登录接口路由路径与前端请求路径不一致，要么将路由改为@views.route("/log/<email>/<password>")，要么修改前端请求路径为/login/
  2. 登出接口jsonify语法错误，修改为return jsonify({"message": "logged out"})

第二步：React端请求配置调整 #

• 所有发送到Flask后端的请求都需要添加credentials: 'include'参数，通知浏览器携带跨域Cookie：

// 修改后的checkLogin函数示例
const checkLogin = () => {
    if(!inusername || !password){
        setError("请填写所有必填项")
    }
    else{
        fetch(`http://127.0.0.1:5000/login/${inusername}/${password}`, {
            credentials: 'include'
        })
        .then((response) => response.json())
        .then((data) =>  {
            if ("error" in data){
                setError(data["error"])
            }
            else{
                // 修复拼写错误：seccess改为success
                setInfor(data["success"])
            }
        });
    }    
}

• 后续/checkuser、/out等其他后端接口请求，都需要添加相同的credentials配置。

额外注意事项 #

• 不要将密码直接拼接在URL路径中，该方式会被各级日志记录存在严重安全风险，建议改为POST请求将账号密码放在请求体中传输。
• 开发环境下前后端访问地址要统一，要么都用localhost，要么都用127.0.0.1，避免浏览器判定为不同源。

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