使用 CORS 在浏览器中设置 httpOnly cookie 的正确方法是什么？

Question

我有一个在 https://foo.test.com 上运行的节点 js 服务器，其中身份验证 API 返回一个 httpOnly cookie，当站点位于 https://bar.test.com 时，该 cookie 未在浏览器中设置。

从服务器端设置cookie：

ctx.cookies.set('foo', 'bar', {
  httpOnly: true,
  maxAge: 8.64e+7,
  sameSite: 'strict',
  secure: true,
  domain: 'test.com',
});

CORS 配置

app.use(cors({
    origin: 'https://bar.test.com',
    credentials: true,
})).use(bodyParser()).use(jwt).use(router.routes());

客户端认证api

fetch('/validate-otp', {
  method: 'PUT',
  headers: {
     Accept: 'application/json',
     'Content-Type': 'application/json',
   }, 
  credentials: 'include',   
})

我已经在服务器上设置了一个测试 API，以查看 cookie 是否设置为如下所示的标头，即使它暂时不起作用。

fetch('/test', {
  method: 'GET',
  headers: {
    Accept: 'application/json',
    'content-Type': 'application/json',
  },
  credentials: 'include',
});

在浏览器中，我可以看到我收到了带有响应的 cookie，但它没有被设置。

如何在浏览器中正确设置 httpOnly cookie，以便我可以将其作为未来服务器请求的标头发送？

Answer 1

cookie 设置后会自动附加到所有请求。我首先更改 maxAge。由于测量单位是毫秒，因此您的 cookie 将不足以发送 (60*60ms = 3600ms = 3.6s)，可能类似于 maxAge: 8.64e+7 - 对应于 24 小时 - 可以工作。

httpOnly 属性会阻止任何客户端 javascript 访问它，但对于您这样的身份验证目的，这是一种合理的行为。

Answer 2

在深入挖掘之后，我解决了我的问题，将用于从服务器获取 cookie 的身份验证 API 的获取方法从“PUT”更改为“POST”。