使用VueJS `npm run serve`前端时Flask会话无法持久化的原因？

我之前也碰到过几乎一模一样的场景，前后端分离跨域导致Session关联不上，折腾了好几个小时才搞定，给你梳理几个关键的修复点：

1. 修正Flask的CORS配置（核心！） #

当你设置support_credentials=True时，Access-Control-Allow-Origin不能用通配符*——浏览器会因为安全策略直接拒绝接受Cookie。你需要指定具体的前端源：

from flask_cors import CORS

# 替换成你的前端实际地址，开发环境就是http://localhost:8080
CORS(app, origins="http://localhost:8080", supports_credentials=True)

另外，你在视图函数上添加的@cross_origin(supports_credentials=True)可以保留，但要确保全局CORS配置和视图级配置一致，避免冲突。

2. 确保前端请求携带Credentials #

不管你用Axios还是Fetch，必须显式开启携带Cookie的选项，否则前端不会把后端Set-Cookie的内容带回给服务器：

• 如果用Axios，在全局配置里添加：

// 比如在main.js里
import axios from 'axios'
axios.defaults.withCredentials = true

• 如果用Fetch，每个请求都要加上credentials: 'include'：

fetch('/api/your-path', {
  method: 'GET',
  credentials: 'include'
})

3. 完善Vue DevServer的Proxy配置 #

你的代理配置缺少几个关键参数，需要加上changeOrigin: true和cookieDomainRewrite，保证Cookie的Domain正确匹配：

module.exports = {
  devServer: {
    headers: {
      // 这里可以去掉Access-Control-Allow-Origin，代理会自动处理跨域
      "Access-Control-Allow-Credentials": "true",
      "Access-Control-Allow-Headers": "Content-Type, Authorization, x-id, Content-Length, X-Requested-With",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS"
    },
    proxy: {
      '/api*': { 
        target: 'http://localhost:5000/',
        changeOrigin: true,  // 必须加，否则后端会认为请求来自8080端口
        cookieDomainRewrite: 'localhost'  // 把Cookie的Domain重写为localhost，适配开发环境
      }
    }
  }
}

4. 检查Flask Session的配置 #

如果你用的是Flask-Session扩展 #

别忘了初始化它，开发环境可以先用文件存储作为Session后端：

from flask_session import Session

app.config['SECRET_KEY'] = 'super_secret'
app.config['SESSION_TYPE'] = 'filesystem'  # 开发环境用文件存储方便调试
app.config['SESSION_COOKIE_SAMESITE'] = 'Lax'  # 开发环境设为Lax即可，生产环境按需调整
app.config['SESSION_COOKIE_SECURE'] = False  # 开发环境是HTTP，设为False；生产环境HTTPS要设为True

Session(app)  # 必须执行这一步初始化扩展

如果你用的是Flask自带的Session #

确保SECRET_KEY正确设置，同时调整Cookie的SameSite和Secure属性，避免浏览器拦截：

app.secret_key = 'super_secret'
app.config['SESSION_COOKIE_SAMESITE'] = 'Lax'
app.config['SESSION_COOKIE_SECURE'] = False

5. 测试验证步骤 #

1. 重启前后端服务，清除浏览器缓存和Cookie（旧的Cookie可能干扰测试）
2. 调用/login接口，在浏览器开发者工具的Application -> Cookies里查看是否有session（或你配置的Cookie名称）被设置
3. 调用其他接口时，查看Request Headers里是否包含Cookie字段，且值和之前的Session Cookie一致
4. 在Flask的视图函数里打印session对象，确认是否能读取到aaa键

按照这些步骤调整后，应该就能解决Session跨请求无法读取的问题了。

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