Next.js 13中间件修改Cookie头后，getServerSideProps的request.cookies未同步

你遇到的问题本质是：Next.js在请求进入服务器端渲染流程（比如触发getServerSideProps）时，会提前解析请求头里的Cookie并生成request.cookies对象，这个解析过程不会因为中间件修改了请求头而自动重新执行，所以request.cookies仍保持初始解析的结果，只有request.headers.cookie能看到更新后的值。

解决方案1：在getServerSideProps中手动重新解析Cookie头 #

既然已经能拿到更新后的Cookie头，你可以手动解析它并覆盖或合并到request.cookies中。示例代码如下：

先编写Cookie解析函数：

function parseCookies(cookieHeader) {
  if (!cookieHeader) return {};
  return cookieHeader.split(';').reduce((cookies, cookie) => {
    const [name, value] = cookie.trim().split('=');
    cookies[name] = decodeURIComponent(value);
    return cookies;
  }, {});
}

然后在getServerSideProps中使用：

export async function getServerSideProps(context) {
  // 从更新后的请求头重新解析Cookie
  const updatedCookies = parseCookies(context.req.headers.cookie);
  
  // 此时updatedCookies包含中间件新增的test-cookie
  console.log(updatedCookies['test-cookie']); // 输出test-value
  
  // 替换原有request.cookies，确保后续逻辑使用最新值
  context.req.cookies = updatedCookies;
  
  // 后续业务逻辑...
  return { props: {} };
}

解决方案2：通过中间件传递自定义数据（替代方案） #

如果不想手动解析Cookie，也可以在中间件中把新增的Cookie值放到自定义请求头里，再在getServerSideProps中读取并添加到request.cookies：

中间件代码修改：

const requestHeaders = new Headers(request.headers);
const existingCookie = requestHeaders.get('Cookie') || '';
const newCookie = `${existingCookie};test-cookie=test-value`;
requestHeaders.set('Cookie', newCookie);
// 添加自定义头传递新增的Cookie值
requestHeaders.set('x-custom-test-cookie', 'test-value');

const response = NextResponse.next({
  request: {
    headers: requestHeaders,
  },
});
return response;

getServerSideProps中处理：

export async function getServerSideProps(context) {
  // 读取自定义头并添加到cookies对象
  const testCookieValue = context.req.headers['x-custom-test-cookie'];
  if (testCookieValue) {
    context.req.cookies['test-cookie'] = testCookieValue;
  }
  
  console.log(context.req.cookies['test-cookie']); // 输出test-value
  
  return { props: {} };
}

注意：自定义请求头建议加上x-前缀，避免与标准HTTP请求头冲突。

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