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

Question

我正在积极尝试获取有关 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 令牌，我如何将它发送到具有适当 header 的特定路由，如下所示

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

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

Answer 1

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

中显式设置它

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

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

看看这个post。

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

How to manage and send httpOnly stored jwt cookies within React and Axios

reactjs

express

cookies

axios

cookie-httponly