Cookie 未使用 Fetch 存储答案

【问题标题】：Cookies not being stored with FetchCookie 未使用 Fetch 存储
【发布时间】：2016-04-16 12:14:29
【问题描述】：

我已经阅读了我能找到的所有其他主题，但没有一个解决方案有效。我正在使用 React + Redux + Express 并尝试将 JWT 存储在 cookie 中：

https://auth0.com/blog/2015/09/28/5-steps-to-add-modern-authentication-to-legacy-apps-using-jwts/

在我的 Redux 操作中，我发送以下请求：

export function getCookie(token) {
  const config = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + token
    },
    body: JSON.stringify({ token })
  };
  return fetch('http://127.0.0.1:4000/authorize-cookie', config)
   .then((res) => {
     return res.json();
   })
   .then((resJson) => {
     return resJson;
   })
   .catch(err => console.log('Error: ', err));
}

在我正在响应的服务器上...

app.post('/authorize-cookie', authenticate, (req, res) => {
  res.cookie('id_token', req.body.token, {
    maxAge: 360000
  });
  res.status(200).send({ message: 'Cookie set!' });
});

...其中 authenticate 是一个验证令牌的函数。

我的响应头似乎一切正常：

HTTP/1.1 200 OK
Set-Cookie: id_token=xxx.xxx.xxx; Max-Age=360; Path=/; Expires=Tue, 12 Jan 2016 01:24:03 GMT
Content-Type: application/json; charset=utf-8
Content-Length: 25
ETag: W/"19-UA3htFr0PWczMQBN6T4NpA"
Date: Tue, 12 Jan 2016 01:18:03 GMT
Connection: keep-alive

但是当我检查源选项卡时，找不到任何 cookie。我读过关于关闭 httpOnly 和安全以及使用 localhost 的问题。我也尝试过所有主流浏览器，但都没有运气。

这是怎么回事？

【问题讨论】：

您的 cookie 有 Max-Age=360（即 6 分钟）。也许过期这么快？
我已经尝试将其更改为数小时和数天，但仍然没有运气。
如我所见，你要去http://127.0.0.1:4000。它实际上是同一个域，您的网页在哪里打开？您无法在跨域请求期间保存 cookie。
是的，它是同一个域。我什至将它设置为允许跨域请求，以确保这不是我的问题。

标签： express cookies fetch jwt redux

【解决方案1】：

你遇到了一个有趣的案例。问题是fetch 函数的行为与XMLHttpRequest 不同。要在 fetch 中使用 cookie，您应该明确提供 credentials 选项。

fetch('http://127.0.0.1:4000/authorize-cookie', {
    method: 'POST',
    body: JSON.stringify({token: token}),
    credentials: 'same-origin', // <- this is mandatory to deal with cookies
})

根据the article on MDN

凭据：您要用于请求的请求凭据：省略、同源或包含。要自动发送当前域的 cookie，必须提供此选项。

【讨论】：