如何在前端使用 HttpOnly jwt cookie

Posted 2023-02-19

【中文标题】如何在前端使用 HttpOnly jwt cookie

【英文标题】：How do I use an HttpOnly jwt cookie on the frontend

【发布时间】：2021-01-04 17:06:26

【问题描述】：

由于无法读取 HttpOnly cookie，如何在前端使用 HttpOnly JWT cookie？

从 HttpOnly cookie 中获取 JWT 后存储 JWT 的最佳做法是什么？既然我已经从后端传递了 cookie，我还需要将它存储在某个地方吗？

我知道本地存储不安全。

我不知道这是否重要，但我正在 http://localhost:8080/ 上提供我的 Vue 应用程序，并且我正在使用 Node/Express 在 http://localhost:3000 上运行我的后端应用程序.

【参考方案1】：

httpOnly 设计的 cookie 无法通过您的浏览器访问。

您必须将credentials 包含在您使用的任何http 客户端的请求中：

fetch.js

// with axios
axios.post(url, formData, 
    withCredentials: true
)

// or with fetch
fetch(url, 
  credentials: 'include'
);

在您的快速入口点内：

app.js

const cors = require("cors");
const cookieParser = require("cookie-parser");

const corsOptions = 
    credentials: true,
    ... other cors options ...
;

app.use(cookieParser(secret));
app.use(cors(corsOptions));

这些配置将自动将您的httpOnly cookie 与您的请求一起传递，您可以从您的服务器访问它们

如果你的 cookie 是 signed:

const tokenName = req.signedCookies;

否则：

const tokenName = req.cookies;