React/Express set-cookie 不能跨不同的子域工作

Posted 2023-03-02

【中文标题】React/Express set-cookie 不能跨不同的子域工作

【英文标题】：React/Express set-cookie not working across different subdomains

【发布时间】：2022-01-24 05:35:33

【问题描述】：

我有一个带有 Express API 服务器的 React 前端，我正在尝试将 JWT 存储在一个安全的 httpOnly cookie 中以进行授权。以下是我的代码的相关部分，其中包括我从无数 Google/*** 搜索中尝试过的所有内容。

我错过了一些简单的东西吗？我试图避免将 JWT 存储在 localStorage 中，但我现在不知所措。似乎没有任何效果。

API (https://api.mydomain.com)：

app.use(cors(
  credentials: true,
  exposedHeaders: ['SET-COOKIE'],
  origin: 'https://staging.mydomain.com',
));

app.post('/auth/login', (request, response) => 
  ...

  response.cookie('jwt', JWT.sign( id: user.id , ...), 
    domain: 'mydomain.com',
    httpOnly: true,
    sameSite: 'none',
    secure: true,
  );

  response.json(user);
);

网络 (https://staging.mydomain.com)：

await fetch('https://api.mydomain.com/auth/login', 
  body: JSON.stringify( ... ),
  credentials: 'include',
  headers: 
    'Content-Type': 'application/json',
  ,
  method: 'POST',
);

我在响应中看到set-cookie 标头，但是我没有看到开发者工具中设置的cookie，也没有在后续的API 请求中传递。

Response Headers:
access-control-allow-credentials: true
access-control-allow-origin: https://staging.mydomain.com
access-control-expose-headers: SET-COOKIE
set-cookie: jwt=abcde*********.abcde*********.abcde*********; Domain=mydomain.com; Path=/; HttpOnly; Secure; SameSite=None

【参考方案1】：

在您的服务器上，当您设置 cookie 时，您可以尝试在域前添加一个点。前导点表示 cookie 对子域也有效。

response.cookie('jwt', JWT.sign( id: user.id , ...), 
  domain: '.mydomain.com',
  httpOnly: true,
  sameSite: 'none',
  secure: true,
);

当客户端（此处为https://staging.mydomain.com）将收到Set-Cookie 响应标头，带有尾随的点域时，它将接受 cookie，因为现在 cookie 对子域也有效。

顺便说一句，我发现Cookie Editor 对调试 cookie 非常有帮助。

希望这个答案对您有所帮助！ :)

【讨论】：

感谢您的回复！我试过这个，不幸的是，没有看到任何变化。 :(

哎呀，nvm 确实有效。具有讽刺意味的是，我在原来的帖子中犯了一个错字，结果是正确的。我在我的 fetch 调用中的标题内有凭据，但是当我在我的帖子中输入伪代码时，我把它放在标题之外（这最终是正确的方式）。现在正在正确设置 cookie 并在后续请求中发送。非常感谢！