如何在前端使用 HttpOnly jwt cookie

【问题标题】：How do I use an HttpOnly jwt cookie on the frontend如何在前端使用 HttpOnly jwt cookie
【发布时间】：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 上运行我的后端应用程序.

【问题讨论】：

标签： express vue.js cookies jwt cookie-httponly

【解决方案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;

【讨论】：