使用NPM的js-cookie包遇异常：设置Cookie后无法获取值

核心问题 #

js-cookie 是专为浏览器环境设计的Cookie操作库，它依赖浏览器的 document.cookie API运行。你的代码运行在Node.js后端环境中，这里不存在浏览器的DOM环境，因此调用 Cookies.set() 并没有真正写入Cookie，自然无法通过 Cookies.get() 获取到值。

解决方案 #

根据你的使用场景，可选择以下两种处理方式：

1. 后端环境：使用Node.js专属Cookie方案 #

如果是在Node.js后端（比如Express框架）中操作Cookie，推荐使用 cookie-parser 中间件，或直接通过响应对象的 setHeader 方法设置：

Express + cookie-parser 示例：

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

app.use(cookieParser());

const initializeItems = (req, res) => {
  // 设置Cookie
  res.cookie('gameData', 'value', { httpOnly: true });
  // 注意：当前请求中无法立即读取刚设置的Cookie，需在下一次请求中获取
  console.log('Game started. Data stored in session cookie.');
  res.send('Cookie set successfully');
};

app.get('/', initializeItems);

app.listen(3000);

2. 前端环境：在浏览器中使用js-cookie #

如果你的Cookie操作逻辑本就应该在前端执行，需将代码移至浏览器端的JS文件（比如Vue/React组件、静态JS文件）中，而非Node.js后端代码：

前端示例：

// 浏览器端JS文件（可通过import或<script>标签引入js-cookie）
import Cookies from 'js-cookie';

const generateCookies = () => {
  Cookies.set('gameData', 'value');
  console.log(Cookies.get('gameData')); // 此时可正常输出'value'
  console.log('Game started. Data stored in session cookie.');
};

generateCookies();

额外说明 #

• 后端设置的Cookie，需客户端发起下一次请求时才会携带到服务端，因此当前请求中无法立即读取刚设置的Cookie。
• 前后端分离项目中，前端负责设置浏览器Cookie，后端通过请求头的Cookie字段读取对应值。

内容的提问来源于stack exchange，提问作者Nikhil