无法在其他域上设置 cookie。表达和反应答案

【问题标题】：Unable to set cookie on a different domain. Express and React无法在其他域上设置 cookie。表达和反应
【发布时间】：2021-10-28 04:57:57
【问题描述】：

我的后端托管在服务器上，例如 backend.vercel.app，前端托管在另一台服务器上，例如 frontend.vercel.app

每当用户向/login 路由发送请求时，我都会像这样设置cookie：

const setCookie = (req, res, token) => {
  res.cookie('jwt', token, {
    expires: new Date(Date.now() + process.env.JWT_COOKIE_EXPIRES_IN * 24 * 60 * 60 * 1000)
  });
};

在前端，我正在使用 axios 向backend.vercel.app/login 路由发送请求，使用{withCredentials: true}

但是，即使成功登录，cookie 也没有设置。

cookies 在后端 API 中，但不在前端： Image of available cookies

我错过了什么？

【问题讨论】：

你在哪里找cookie？您是否使用浏览器开发者工具查看是否正在发送 cookie？
我做到了。我无法在任何地方找到 cookie。它也不存在于 cookie 存储中。
你最后打电话给res.end()吗？
我在最后发送一个带有res.status(200).json({...})的JSON响应

标签： javascript node.js reactjs express axios

【解决方案1】：

例如，当您在 backend.vercel.app 上设置 cookie 时，您设置的 cookie 只能从同一个子域访问，而不能被其他子域访问。为了共享 cookie，您必须为父域设置 cookie。

例如：

res.cookie('jwt', token, {
   expires: new Date(Date.now() + process.env.JWT_COOKIE_EXPIRES_IN * 24 * 60 * 60 * 1000),
   domain: "vercel.app"
});

这应该可以，但是如果不行，您应该检查您的 cors 配置。

【讨论】：

不幸的是，它没有用。这就是 CORS 的设置方式：app.use(cors({ credentials: true }));
我认为这个问题可能对您有所帮助：stackoverflow.com/questions/56328049/… 请告诉我这是否对您有帮助。
您也可以考虑使用 postman 或 insomnia 直接测试您的后端 api 并检查是否为子域设置了 cookie，如果是，那么问题很可能与如何您正在设置 cookie，即您正在为其设置 cookie 的域。
是的，所以我尝试在邮递员中发出登录请求。后端正在发送 cookie。嗯，我猜，那么前端是无法存储cookie的？
我已经稍微编辑了这个问题。所以，如果这有助于找到解决方案

【解决方案2】：

更新：我通过在登录请求中手动指定method: 'POST' 解决了这个问题。并且，在后端使用了这个中间件：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,UPDATE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
  next();
});

感谢 Kenneth Lew 的评论，我还应用了 CORS 配置。

干杯！

【讨论】：