Next.js13中Turbopack与Webpack下response.headers结构差异致Cookie获取异常

问题背景 #

在Next.js 13项目对接第三方API认证时，切换打包工具后出现Headers结构不一致的问题：

• Turbopack环境：response.headers提供raw()方法，set-cookie返回字符串数组，可直接遍历处理。
• Webpack环境：response.headers遵循标准Fetch API实现，无raw()方法，set-cookie返回合并后的单个字符串，直接调用raw()会报错response.headers.raw is not a function。

解决方案 #

针对两种打包工具的Headers差异，编写兼容逻辑：

1. 先判断headers是否存在raw()方法，区分运行环境。
2. Webpack环境下，将合并的set-cookie字符串拆分为单个cookie条目（注意避免拆分cookie内部的逗号，比如expires字段的日期）。

修改后的代码实现 #

更新parseCookies函数，添加兼容处理：

function parseCookies(response: any) {
  let setCookieEntries: string[];

  // 兼容Turbopack的raw()方法和Webpack的标准Headers
  if (typeof response.headers.raw === 'function') {
    setCookieEntries = response.headers.raw()['set-cookie'] || [];
  } else {
    const setCookieStr = response.headers.get('set-cookie');
    if (!setCookieStr) {
      setCookieEntries = [];
    } else {
      // 用正则分割多个Set-Cookie条目：匹配逗号后紧跟非空格字符的位置（即新cookie的开头）
      setCookieEntries = setCookieStr.split(/,(?=[^ ])/);
    }
  }

  return setCookieEntries
    .map(entry => {
      const parts = entry.split(';');
      // 提取cookie的键值对部分（忽略后续属性如expires、path等）
      return parts[0];
    })
    .join(';');
}

关键说明 #

• 标准Fetch API中，Headers.get('set-cookie')会将多个Set-Cookie头合并为一个用逗号分隔的字符串，因此需要用正则正确拆分。
• 正则/(?=[^ ])/是正向预查，确保只拆分分隔不同cookie的逗号，不会误拆单个cookie内部的逗号（比如expires=Wed, 21 Oct 2025 07:28:00 GMT中的逗号）。

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