由于 chrome 中的 SameSite 问题，Flask+Vue Flask 会话不持久答案

【问题标题】：Flask+Vue Flask session are not persistant because of SameSite problem in chrome由于 chrome 中的 SameSite 问题，Flask+Vue Flask 会话不持久
【发布时间】：2023-03-11 14:36:01
【问题描述】：

我正在尝试使用文章中提到的 SPA 样式使用 Flask + Vue 构建： https://testdriven.io/blog/combine-flask-vue/

使用 chrome 时，Flask 会话不是持久的谷歌开发工具正在引发 SameSite 问题：

我尝试根据堆栈溢出中找到的信息修复它：设置：

from flask import Flask, make_response
from flask import session
from flask_cors import CORS
from flask_session import Session

from SodukoUtils import init_board_options, find_next_move
from data.sudopy import Sudoku

app = Flask(__name__)
SESSION_TYPE = 'filesystem'
app.secret_key = b'abjdslgjl'
app.config.from_object(__name__)
CORS(app, supports_credentials=True)
Session(app)
app.config.update(
    SESSION_COOKIE_SECURE=True,
    SESSION_COOKIE_HTTPONLY=True,
    SESSION_COOKIE_SAMESITE='None',
)

但是，当我使用 chrome 浏览器时，问题仍然存在。当我使用 Mozilla 浏览器时，烧瓶会话工作正常。

在 Vue 中，我使用 fetch 通过将模式设置为“cors”并将凭据设置为“包含”来发送 http 请求例如：

fetch(url, {
        mode: 'cors',
        credentials: 'include',
      })

github 仓库link

包裹信息：

【问题讨论】：

你的测试代码有什么仓库吗？
@TarunLalwani 我添加了详细信息github.com/idannik/Flask_Sudoku

标签： vue.js cookies cross-domain samesite

【解决方案1】：

解决这个问题很困难，因为我无法安装您的依赖项或运行您的应用程序。

我认为你这样做是正确的。我建议在初始化 CORS 和 Sessions 包之前设置app.config 值。此外，在响应处理程序中，您可以手动设置标头以标记"SameSite=None"。代码如下。

response.set_cookie('username', 'flask', secure=True, httponly=True, samesite='Lax')

查看文档here

【讨论】：

我在上面写了包信息。我试过你的建议，还是不行
好的，首先你需要弄清楚的是如何用flask设置any headers。这不是 Vue 问题。做一个 Flask 教程来创建一个带有自定义标头的服务器。

【解决方案2】：

如果您尝试在 Chrome 上为烧瓶应用程序设置 samesite=None，我通过使用来自 flask.sessions 的 SecureCookieSessisonInterface 类并在响应中添加 after_request 装饰器，为此 thread 编写了一个解决方法使用response.headers.add()。

【讨论】：