部署在Vercel的SvelteKit前端与Flask后端Cookie刷新后消失求助

核心原因：跨域Cookie的SameSite与Domain配置问题 #

Vercel上的两个部署子域（time-master-frontend.vercel.app和time-master-backend.vercel.app）属于独立的二级域场景，而你的IIS环境中两个子域共享同一主域，因此Cookie可以正常持久化。在Vercel的多部署域架构下，默认Cookie配置无法满足跨域持久化要求。

具体修复步骤 #

1. 调整Flask后端的Cookie属性 #

设置登录Cookie时必须明确配置以下关键属性：

• Domain：设为.vercel.app（开头的点不可省略），确保所有vercel.app子域都能访问该Cookie
• SameSite：设为None，跨域场景下必须开启第三方Cookie支持
• Secure：设为True，Vercel强制HTTPS，且SameSite=None要求Cookie必须为Secure类型
• Max-Age：保留你的3天设置（数值为259200）

示例Flask代码：

from flask import make_response

@app.route('/login')
def login():
    resp = make_response("登录成功")
    resp.set_cookie(
        'session_id',
        value=你的会话标识值,
        max_age=259200,
        domain='.vercel.app',
        secure=True,
        httponly=True,  # 建议开启，提升Cookie安全性
        samesite='None'
    )
    return resp

2. 确认前端请求的Credentials配置 #

确保所有跨域请求都正确设置credentials: include，SvelteKit中可在请求时统一配置：

// SvelteKit 接口调用示例
fetch('https://time-master-backend.vercel.app/api/login', {
  method: 'POST',
  credentials: 'include',
  // 其他请求参数
})

3. 配置Flask后端的CORS规则 #

必须开启CORS的凭证支持，指定允许的前端源：

from flask_cors import CORS

app = Flask(__name__)
CORS(
    app,
    origins=["https://time-master-frontend.vercel.app"],
    supports_credentials=True,
    allow_headers=["Content-Type"]
)

4. 验证Cookie属性 #

部署完成后，在浏览器开发者工具的「Application > Cookies」面板检查：

• Domain是否为.vercel.app
• SameSite是否显示为None
• Secure标记是否已勾选
• Max-Age是否正确设置为259200

本地环境正常的原因 #

本地开发时前端与后端通常运行在localhost的不同端口，属于同源范畴，浏览器默认允许Cookie共享，无需额外配置Domain和SameSite属性。

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