如何使用NextJS Server Actions实现客户端与服务端的Cookie转发

要实现客户端和后端API之间的Cookie代理，核心就是在Server Actions里做两件事：把客户端传来的Cookie转发给后端API，再把后端返回的会话Cookie回写给客户端。下面是具体实现步骤：

1. 编写Server Action处理请求 #

创建一个Server Action文件，用Next.js提供的cookies()工具来处理Cookie的读取和设置：

'use server';

import { cookies } from 'next/headers';
// 复用你原来的响应处理函数
import { handleResponse } from './path-to-your-handleResponse';

export async function serverPost<T>(path: string, body: object, customHeaders?: Record<string, string>) {
  // 提取客户端请求里的所有Cookie，拼成符合HTTP标准的Cookie头字符串
  const clientCookieStr = cookies().toString();

  // 向后端API发起请求，带上客户端的Cookie
  const apiRes = await fetch(`https://your-backend-api.com${path}`, {
    method: 'POST',
    headers: {
      ...customHeaders,
      'Content-Type': 'application/json',
      Cookie: clientCookieStr, // 转发客户端Cookie
    },
    body: JSON.stringify(body),
  });

  // 把后端API返回的Set-Cookie头里的Cookie，设置到客户端
  const setCookieHeaders = apiRes.headers.getSetCookie();
  if (setCookieHeaders) {
    setCookieHeaders.forEach(cookie => {
      cookies().set(cookie);
    });
  }

  // 用你原来的逻辑处理API响应
  return handleResponse<T>(apiRes);
}

2. 客户端替换原有请求逻辑 #

把原来客户端的post函数替换成调用这个Server Action就行，用法和原来几乎一样：

// 客户端组件中使用
import { serverPost } from './path-to-your-server-action';

// 调用示例
const authData = await serverPost<AuthResponse>('/auth/login', {
  username: 'test-user',
  password: 'test-pass'
});

关键注意点 #

• Cookie作用域适配：确保后端API返回的Cookie的Domain、Path属性和你的Next.js应用域名匹配，不然客户端存不了这些Cookie。
• 安全属性保留：后端返回的HttpOnly、Secure、SameSite这类安全属性，Next.js会自动保留，不用额外处理。
• 服务端请求无需credentials：Server Actions是服务端发起的请求，直接用Cookie头转发就行，不用设置credentials: 'include'。

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