vue-cookies 操作 Cookie 全解：安装、增删查与 httpOnly 问题修复
在 Vue 项目中，操作 Cookie 是常见的需求，例如存储用户会话标识、文件 ID 等临时数据。vue-cookies 是一个轻量封装，可在 Vue 组件内或普通 JS 文件中方便地读写 Cookie。本文基于实际使用经验，介绍安装、配置以及各种操作方法，并重点分析“浏览器存在 Cookie 但前端获取不到”这一典型问题的成因与解决方案。一、安装与引入
使用 npm 安装：
npm install vue-cookies -S
在项目的 main.js 中全局注册：
import VueCookies from "vue-cookies";
Vue.use(VueCookies);
注册后，所有 Vue 组件内均可通过 this.$cookies 调用 API。
二、在 Vue 组件中使用
1. 设置 Cookie
存储值前需将对象转换为 JSON 字符串：
// 直接存储字符串
this.$cookies.set('fileInfoId', to.query.fileInfoId);
2. 获取 Cookie
let id = this.$cookies.get('fileInfoId');
3. 删除 Cookie
this.$cookies.remove('fileInfoId');
4. 检查 Cookie 是否存在
this.$cookies.isKey('fileInfoId'); // 返回 true 或 false
5. 获取所有 Cookie 的 key 列表
this.$cookies.keys(); // 返回数组，如 ['fileInfoId', 'token']
若在非 Vue 组件（如 router.js）中使用，需先导入再调用：
import cookies from "vue-cookies";
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, ) 种 Cookie 时，默认 options 中的 httpOnly 为 true。
解决办法：后端设置 httpOnly:false 即可允许前端 JS 读取：
// Koa 示例
ctx.cookies.set('token', 'abc123', {
httpOnly: false
});
注意：关闭 httpOnly 会降低安全性，仅在确认不会引入 XSS 风险时使用。
四、总结
vue-cookies 提供了一套简洁的 API 用于增删改查 Vue 项目中的 Cookie。遇到前端无法读取 Cookie 时，优先检查后端设置中 httpOnly 是否为 true。合理配置该属性，可兼顾功能与安全。
Re: vue-cookies 操作 Cookie 全解：安装、增删查与 httpOnly 问题修复
感谢楼主的详细分享，vue-cookies 的用法写得很清楚，特别是那个 HttpOnly 导致前端读不到的坑，之前我也踩过，排查了好久才发现是后端默认设置的问题。建议大家在设置 httpOnly: false 时一定要确认项目没有 XSS 漏洞，或者只对非敏感数据这样做。另外想补充一下，如果后端是 Spring Boot 之类的框架，默认也是 true，改的时候注意别影响其他需要保护的 Cookie。Re: vue-cookies 操作 Cookie 全解：安装、增删查与 httpOnly 问题修复
感谢楼主分享，内容很全面，从安装到常见问题排查都讲得清楚。特别是 httpOnly 这个坑，之前也遇到过后端设了默认值导致前端读不到，排查了好久，楼主的分析直接点明了原因，很有参考价值！Re: vue-cookies 操作 Cookie 全解：安装、增删查与 httpOnly 问题修复
感谢分享！很实用的教程，尤其是关于 httpOnly 导致前端获取不到 Cookie 的排查思路，之前踩过这个坑才意识到是后端设置的问题。另外补充一点：如果项目里有多个子域名需要共享 Cookie，用 `this.$cookies.set()` 时记得加上 `domain` 参数，否则默认只能当前域名访问。再次感谢楼主的详细总结！
页:
[1]