如何在Safari中为两个Fly.io应用配置Express-Session Cookie？

核心问题根源 #

Safari默认开启的「阻止跨站跟踪」会严格拦截第三方Cookie，前后端分属不同域名时，后端设置的会话Cookie会被判定为第三方资源，直接无法保存。

可行的分离式解决方案 #

1. 子域名统一方案（推荐） #

将后端部署到前端域名的子域名下，比如前端为your-app.fly.dev，后端改为api.your-app.fly.dev，两者同属主域，Cookie可正常共享。

• 配置步骤：
  • 在Fly.io控制台为后端应用添加子域名HTTPS证书，确保加密连接正常。
  • 修改Express的Session配置：

    app.use(session({
      secret: 'your-secret-key',
      resave: false,
      saveUninitialized: false,
      cookie: {
        secure: true,
        httpOnly: true,
        sameSite: 'Lax', // 业务允许的话也可设为'Strict'
        domain: '.your-app.fly.dev', // 前缀点匹配所有子域名
        maxAge: 24 * 60 * 60 * 1000
      }
    }));
    

  • 前端直接调用子域名接口，无需额外跨域配置。

2. Fly.io代理转发配置 #

通过Fly.io的fly.toml配置代理，让前端域名下的/api路径转发到后端应用，浏览器会认为请求同域，Cookie不受拦截。

• 前端应用的fly.toml配置示例：

  [[services.ports]]
    handlers = ["http"]
    port = 8080
  
  [[services.routes]]
    path = "/api/*"
    [[services.routes.forwarding]]
      service = "your-backend-app-name" # 替换为你的后端应用名称
      path = "/$1" # 转发时移除/api前缀
  

• 后端保留原有配置，需确保app.set('trust proxy', 1)生效，让Express识别代理后的真实请求；同时Cookie配置需设置secure: true、sameSite: 'Lax'。

3. 非推荐的跨域Cookie方案（慎用） #

你提到的将Cookie信息返回前端手动存储的方式，确实违背了HttpOnly Cookie的安全设计，会暴露XSS攻击风险，绝对不建议采用。若必须跨域，可尝试设置SameSite=None配合Secure属性，但即使如此，Safari默认的跟踪拦截策略仍可能拒绝这类Cookie，仅作为最后备选：

app.use(session({
  cookie: {
    secure: true,
    httpOnly: true,
    sameSite: 'None',
    maxAge: 24 * 60 * 60 * 1000
  }
  // 其他session配置项
}));

验证要点 #

• 所有方案必须基于HTTPS连接，Fly.io默认提供证书，无需额外配置。
• 需在生产环境域名下测试，本地环境无法复现Safari的严格拦截策略。
• 通过浏览器开发者工具的「Application -> Cookies」面板，确认Cookie是否存在SameSite、Secure、HttpOnly标记。

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