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

编程问答 2022-06-06

问题描述

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

但是我还没有看到任何有关如何使用它的实际例子。经过几次试验和错误，我知道我们无法在浏览器中设置httpOnly标志，需要在服务器上完成。因此，我相应地使用了cookie-parser库：

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

app.post('/generat@R_502_6440@ken',(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),}).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或这样做的方式是什么？

解决方法

使用HttpOnly标志设置cookie后，cookie会通过HTTP请求从浏览器自动发送到服务器。您不必在HTTP标头中明确设置它。

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

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

看看这个post。

axioscookie-httponlycookiesexpressreactjsreactjs