Next.js 13.4中间件存储序列化对象到Cookie的URL编码问题

问题原因 #

Next.js的NextResponse.cookies.set方法默认会对Cookie值执行URL编码，这是遵循HTTP Cookie规范的行为（Cookie值不允许包含空格、逗号、分号等特殊字符）。而客户端使用document.cookie设置时，浏览器可能自动处理了编码/解码逻辑，或者你在读取时隐式完成了解码，所以看起来没有编码问题。

解决方案 #

方案1：读取Cookie时解码（推荐） #

不管是在中间件还是客户端读取Cookie，使用decodeURIComponent()解码后再解析JSON：

中间件中读取

import { NextRequest } from "next/server";

export async function middleware(request: NextRequest) {
  const settingsCookie = request.cookies.get('settings')?.value;
  if (settingsCookie) {
    // 解码后解析JSON
    const settings = JSON.parse(decodeURIComponent(settingsCookie));
    // 使用settings对象
  }
}

客户端读取

const getSettingsFromCookie = () => {
  const cookieStr = document.cookie;
  const settingsEntry = cookieStr.split('; ').find(row => row.startsWith('settings='));
  if (settingsEntry) {
    const encodedValue = settingsEntry.split('=')[1];
    const settings = JSON.parse(decodeURIComponent(encodedValue));
    return settings;
  }
  return null;
};

方案2：设置Cookie时禁用编码（需谨慎） #

如果确定你的Cookie值不会包含HTTP Cookie禁止的字符，可以通过encode选项跳过编码：

// 在fetchSettings函数中修改setCookie的代码
nextResponse.cookies.set("settings", JSON.stringify(settings), {
  encode: (value) => value // 直接返回原值，不编码
});

注意：此方法存在风险，如果Cookie值包含空格、逗号、分号等特殊字符，会导致Cookie无法正常存储或读取，建议优先使用方案1。

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