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

Question

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

我是不是漏掉了一些简单的东西？我试图避免将 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);
});

Web (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 header，但我没有在开发者工具中看到设置的 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

Answer 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 响应 header，尾随点域时，它将接受 cookie，因为现在 cookie 对子域名也是。

附带说明一下，我发现 Cookie Editor 对调试 cookie 很有帮助。

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

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

React/Express set-cookie not working across different subdomains

cookies

authorization

node.js

express

reactjs