如何在 React 和 Axios 中管理和发送 httpOnly 存储的 jwt cookie答案

【问题标题】：How to manage and send httpOnly stored jwt cookies within React and Axios如何在 React 和 Axios 中管理和发送 httpOnly 存储的 jwt cookie
【发布时间】：2021-02-07 23:17:48
【问题描述】：

我正在积极尝试获取有关httpOnly cookie 的知识，并发现了很多关于它的文章，我们为什么要使用它。

但我还没有看到任何关于如何使用它的实际示例。通过几次尝试和错误，我知道我们不能在浏览器中设置httpOnly 标志，需要在服务器上完成。所以我相应地使用了cookie-parser 库：

const express = require('express');
var cookieParser = require('cookie-parser');
const app = express();
app.use(cookieParser());

app.post('/generateToken', (req, res) => {
    res.cookie('AccessToken', JWT_AUTH_TOKEN, {
        expires: new Date(new Date().getTime() + 30 * 1000),
        sameSite: 'strict',
        httpOnly: true,
        
    })
    res.cookie('RefreshToken', JWT_REFRESH_TOKEN, {
        expires: new Date(new Date().getTime() + 31557600000),
        sameSite: 'strict',
        httpOnly: true,
    }).send("hello")
    
});

app.listen(process.env.PORT || 5050);

通过这个，我成功地获得了存储在浏览器中的 cookie，所有属性都像 sameSite，HttpOnly 除了 secure:true，因为我在本地主机上。但问题是我们无法使用 javascript 访问这些 httpOnly 令牌，如何将其发送到具有正确标题的特定路由，如下所示

let token = req.headers['authorization'];

并发送 httpOnly cookie refreshToken 到让我们说 /refresh 路由以使用 Axios 获取新的 accessTokens 或使用什么方法？

【问题讨论】：

标签： reactjs express cookies axios cookie-httponly

【解决方案1】：

当您使用 HttpOnly 标志设置 cookie 时，cookie 将通过 HTTP 请求从浏览器自动发送到服务器。您不必在 HTTP Header 中显式设置它。

在服务器上安装cors 后，您可以使用req.cookies 访问cookie。

我不确定 axios，但是如果使用 fetch API，我们需要在 fetch API 中添加credential:'include' 选项，以便可以设置 HttpOnly cookie。

看看这个post。

【讨论】：