Cookie 仅在 Chrome 中设置 - 不在 Safari、移动 Chrome 或移动 Safari 中设置

Question

使用桌面浏览器（仅限 Chrome）时，我有一个有效的注册和登录端点，但当尝试使用移动浏览器注册或登录时，服务器超时。我怀疑这是因为我的会话 cookie 和 csurf cookie 没有随我的获取请求一起发送。

我在手机浏览器上打开了Safari开发，它没有显示任何cookie。我现在怀疑这是因为 MaxAge——

请注意，我的 api 和客户端位于不同的域：Heroku 和 Netlify。请参阅下面的代码：

CORS 选项

const options = {

  origin: "clientUrl",
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  allowedHeaders: [
    "Content-Type",
    "Access-Control-Allow-Headers",
    "Access-Control-Allow-Origin",
    "Authorization",
    "csrf-token"
  ],
  exposedHeaders: [
    "Content-Type",
    "Access-Control-Allow-Headers",
    "Access-Control-Allow-Origin",
    "Authorization",
    "csrf-token"
  ],

  maxAge: 3600,
  preflightContinue: true,
  credentials: true
};

CSURF配置

app.use(
  csurf({
    cookie: true,
    domain: "clientUrl",
    sameSite: "none"
  })
);

快速会话配置

app.use(
  session({
    //This is our Encryption Key
    secret: process.env.sessionCode,
    //We set resave to false because our mongo store implements the "touch" function
    resave: false,
    //We Set saveUninitialized to false because we don't want to save unmodified
    //sessions to our mongo store
    secure: true,
    domain: "clientUrl",
    saveUninitialized: false,
    unset: "destroy",
    sameSite: "none",
    store: new MongoStore({
      mongooseConnection: mongoose.connection,
      //We encrypt out store code
      code: process.env.storeCode
    })
  })
);

Answer 1

经过一番战斗后，我在这篇文章的帮助下解决了这个问题使用 Express 会话设置域会阻止保存 cookie。

该问题归结于第三方 cookie。

如果您将数据从server.herokuapp.com发送到site.herokuapp.com，您将会遇到此问题。解决方案是为前端和后端 Heroku 应用程序使用相同的自定义域。

您应该向前端添加一个自定义域，并向后端 Heroku 应用程序添加一个子域。前端应类似于 mywebsite.com，后端应类似于 server.mywebsite.com。

在您的 DNS 中，子域在本例中应该是server并指向后端的 Heroku DNS 目标。前端子域应该是 @ 或 www 并指向前端的 Heroku DNS 目标。

一旦您的应用程序通过相同的 URL 提供服务并且您设置了 cors，您将不再遇到任何第三方 cookie 问题。

您可以在这里阅读更多相关内容