vue-cookies 操作 Cookie 全解：安装、增删查与 httpOnly 问题修复

脚本专家

在 Vue 项目中，操作 Cookie 是常见的需求，例如存储用户会话标识、文件 ID 等临时数据。vue-cookies 是一个轻量封装，可在 Vue 组件内或普通 JS 文件中方便地读写 Cookie。本文基于实际使用经验，介绍安装、配置以及各种操作方法，并重点分析“浏览器存在 Cookie 但前端获取不到”这一典型问题的成因与解决方案。

一、安装与引入
使用 npm 安装：

2. npm install vue-cookies -S

复制代码

在项目的 main.js 中全局注册：

2. import VueCookies from "vue-cookies";
3. Vue.use(VueCookies);

复制代码

注册后，所有 Vue 组件内均可通过 this.$cookies 调用 API。

二、在 Vue 组件中使用
1. 设置 Cookie
存储值前需将对象转换为 JSON 字符串：

2. // 直接存储字符串
3. this.$cookies.set('fileInfoId', to.query.fileInfoId);

复制代码

2. 获取 Cookie

2. let id = this.$cookies.get('fileInfoId');

复制代码

3. 删除 Cookie

2. this.$cookies.remove('fileInfoId');

复制代码

4. 检查 Cookie 是否存在

2. this.$cookies.isKey('fileInfoId'); // 返回 true 或 false

复制代码

5. 获取所有 Cookie 的 key 列表

2. this.$cookies.keys(); // 返回数组，如 ['fileInfoId', 'token']

复制代码

若在非 Vue 组件（如 router.js）中使用，需先导入再调用：

2. import cookies from "vue-cookies";
3. cookies.set('fileInfoId', to.query.fileInfoId);

复制代码

三、常见问题：前端无法读取已存在的 Cookie
现象：浏览器开发者工具 Application > Cookies 中能查到一个 Cookie，但通过 document.cookie 或 this.$cookies.get() 返回空。
原因：Cookie 设置了 HttpOnly 属性。HttpOnly 默认为 true 时，禁止 JavaScript 通过 document.cookie 读取该 Cookie，这是为防止 XSS 攻击而采取的安全措施。

若使用 Node.js + Koa 后端，通过 ctx.cookies.set(name, value, [options]) 种 Cookie 时，默认 options 中的 httpOnly 为 true。
解决办法：后端设置 httpOnly:false 即可允许前端 JS 读取：

2. // Koa 示例
3. ctx.cookies.set('token', 'abc123', {
4.   httpOnly: false
5. });

复制代码

注意：关闭 httpOnly 会降低安全性，仅在确认不会引入 XSS 风险时使用。

四、总结
vue-cookies 提供了一套简洁的 API 用于增删改查 Vue 项目中的 Cookie。遇到前端无法读取 Cookie 时，优先检查后端设置中 httpOnly 是否为 true。合理配置该属性，可兼顾功能与安全。

热心网友7

感谢楼主的详细分享，vue-cookies 的用法写得很清楚，特别是那个 HttpOnly 导致前端读不到的坑，之前我也踩过，排查了好久才发现是后端默认设置的问题。建议大家在设置 httpOnly: false 时一定要确认项目没有 XSS 漏洞，或者只对非敏感数据这样做。另外想补充一下，如果后端是 Spring Boot 之类的框架，默认也是 true，改的时候注意别影响其他需要保护的 Cookie。