NuxtJS中间件异步设置Cookie报响应头已发送错误如何解决

• 需求：在用户进入应用前基于Cookie校验访问权限，无权限则重定向到指定页面
• 现象：将校验逻辑写入Nuxt中间件后，在fetch/axios异步调用返回后设置Cookie会触发报错：ERROR Cannot set headers after they are sent to the client
• 现有实现：使用cookies-universal-nuxt插件操作Cookie，核心代码如下：

export default function (context) {
  let payload = {
    cookie1: context.$cookies.get("cookieName1"),
    cookie2: context.$cookies.get("cookieName2"),
  }

  let cookie1= '';
  let cookie2= '';

  context.store.dispatch('checknCookies', payload)      
  .then(() => {
    cookie1= context.store.getters.getCookie1;
    cookie2= context.store.getters.getCookie2;

    context.$cookies.set('cookieName1', cookie1, {
      path: '/',
      maxAge: 10,
      expires: 0,
      // domain: 'localhost'
    })

    context.$cookies.set('cookieName2', cookie2, {
      path: '/',
      maxAge: 10,
      expires: 0,
      // domain: 'localhost'
    })
  })
})

• 测试结论：在调用store方法（内部通过axios请求获取Cookie所需值）之前设置Cookie可正常生效，axios异步请求返回后再设置Cookie就会触发上述错误，检索同类问题未找到有效解决方案。

这个错误的本质是Nuxt中间件没有等待异步逻辑执行完成就提前放行：当前中间件是同步函数，内部的store.dispatch是异步请求，没有等待这个Promise resolve，中间件执行完同步代码后就直接进入后续页面渲染流程，Nuxt会把响应头、页面内容发送给客户端。等异步请求返回、在.then回调里执行Cookie设置时，响应已经发送完成，而Cookie是通过响应头的Set-Cookie字段下发的，此时自然无法再修改响应头，触发报错。
另外现有Cookie配置存在逻辑错误：同时设置maxAge: 10和expires: 0时，expires:0会直接让Cookie过期失效，即使设置成功也无法正常读取。

1. 将中间件改为异步函数，用await等待所有异步逻辑（接口请求、Cookie设置、权限判断）全部执行完成后再结束中间件执行，不要让流程提前走到页面渲染环节。
2. 修正Cookie配置错误，删除冲突的expires:0配置，maxAge和expires只保留一个即可。
3. 在异步逻辑执行完成后补充权限判断，无权限时直接调用context.redirect完成重定向。

修正后的核心代码：

export default async function (context) {
  const payload = {
    cookie1: context.$cookies.get("cookieName1"),
    cookie2: context.$cookies.get("cookieName2"),
  }

  // 等待权限校验接口请求完成
  await context.store.dispatch('checknCookies', payload)
  const cookie1 = context.store.getters.getCookie1
  const cookie2 = context.store.getters.getCookie2

  // 此时响应未发送，可正常设置Cookie
  context.$cookies.set('cookieName1', cookie1, {
    path: '/',
    maxAge: 10,
    // 本地调试需要跨域共享Cookie时再放开domain配置
  })
  context.$cookies.set('cookieName2', cookie2, {
    path: '/',
    maxAge: 10,
  })

  // 补充权限校验逻辑，无权限则直接重定向
  if (!cookie1 || !cookie2 /* 替换为实际的无权限判断条件 */) {
    return context.redirect('/no-permission') // 替换为实际的无权限页面地址
  }
}

• Nuxt中间件中所有涉及异步的操作（接口请求、IO操作、Cookie/头信息修改、重定向）必须全部通过await等待执行完成，禁止在未被等待的Promise回调中执行头修改、重定向操作，否则必然触发头已发送的错误。
• 如果需要区分服务端/客户端执行逻辑，可以通过process.server/process.client判断，服务端操作Cookie时是修改响应头，客户端操作Cookie是操作浏览器本地Cookie，逻辑不要混淆。

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