Next.js App Router：如何持久化etag Header用于后续请求

问题原因 #

你在Next.js App Router的API路由里直接用cookies().set()存储ETag，但这个操作只会修改当前请求上下文的内存Cookie，不会自动把Cookie添加到返回给客户端的响应头。客户端没收到这个Cookie，后续PATCH请求自然拿不到对应的值。

修复方案 #

要让客户端收到Cookie，必须通过NextResponse对象来设置，这样才会在响应头中添加Set-Cookie字段，客户端才能持久化存储这个Cookie。

修改你的GET路由代码如下：

// app/api/cart/[cartId]/route.ts
import { withApiAuthRequired } from '@auth0/nextjs-auth0';
import { NextResponse } from 'next/server';
import { createGlueServerClient } from '@/src/lib/http/client/client.glue.server';

const GET = withApiAuthRequired(async (request: Request, { params }: { params: { cartId: string } }) => {
  const client = createGlueServerClient();
  const response = await client.get(`carts/${params.cartId}`, {
    withAuth: true,
  });
  const etag = response.headers.get('etag');
  
  // 创建NextResponse对象
  const apiResponse = NextResponse.json(await response.json());
  
  // 通过NextResponse的cookies方法设置Cookie
  if (etag) {
    apiResponse.cookies.set('cart-etag', etag, {
      path: '/', // 确保全站可访问
      httpOnly: true, // 可选，提升安全性，防止XSS
      secure: process.env.NODE_ENV === 'production', // 生产环境开启HTTPS时启用
      sameSite: 'strict', // 防止CSRF
      maxAge: 86400 // 可选，设置Cookie过期时间，比如1天
    });
  }
  
  return apiResponse;
});

export { GET };

额外注意事项 #

• 避免Cookie冲突：如果系统中有多个购物车，建议给Cookie名加上购物车ID前缀，比如cart-${params.cartId}-etag，防止不同购物车的ETag互相覆盖。
• Cookie属性配置：根据你的业务需求调整httpOnly、secure、sameSite等属性，平衡安全性和可用性。
• PATCH请求中获取Cookie：确保PATCH路由中使用cookies().get('cart-etag')时，Cookie的路径和你设置的一致（比如都是/），否则会获取失败。

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