Go Web服务器无法获取Next.js客户端请求中的Cookie问题排查

核心原因 #

你遇到的问题本质是Next.js的服务器端请求（SSR/Server Component）与客户端组件请求的Cookie携带逻辑不同：

• 客户端组件的请求由浏览器直接发起，浏览器会自动携带符合条件的Cookie到Go服务；
• 页面重载时的列表请求如果是由Next.js服务器端发起的（比如Server Component、getServerSideProps中的请求），Next.js服务器不会自动将浏览器的Cookie转发给Go服务，导致Go中间件无法获取到token Cookie。

另外，Cookie的配置细节也可能放大这个问题，下面分场景给出具体解决方法：

一、Cookie配置修正 #

先检查Go服务的SetCookie参数：

func (a AuthRepository) StoreInCookie(value, cookieName string, c *gin.Context) {
    c.SetCookie(cookieName, value, 0, "/", "", os.Getenv("ENVIRONMENT") == "prod", false)
}

1. Domain参数问题 #

当前domain参数为空，浏览器会将Cookie绑定到Go服务的域名。如果Next.js与Go服务不在同域名/子域名下，浏览器只会向Go服务域名的请求携带Cookie，而Next.js服务器发起的请求来源是自身域名，不会携带该Cookie。

• 解决：将domain设为共享的根域名（比如两者都是*.example.com，则设为.example.com），确保跨子域名时Cookie能被正确携带。
  修改后示例：

  // 假设根域名是example.com，根据实际情况调整
  domain := ".example.com"
  if os.Getenv("ENVIRONMENT") == "dev" {
      domain = "" // 开发环境本地域名可留空
  }
  c.SetCookie(cookieName, value, 0, "/", domain, os.Getenv("ENVIRONMENT") == "prod", false)
  

2. Secure参数适配 #

生产环境Secure设为true（仅HTTPS传输）是正确的，但开发环境如果用HTTP服务，Secure设为true会导致浏览器拒绝携带Cookie，确保开发环境该参数为false。

二、Next.js服务器端请求手动转发Cookie #

不管是否跨域，Next.js服务器端发起的请求都需要手动将浏览器的Cookie转发给Go服务：

1. App Router（Server Component） #

使用next/headers提供的cookies工具获取浏览器Cookie，然后在请求头中携带：

import { cookies } from 'next/headers';

async function fetchListData() {
  const cookieStore = cookies();
  const tokenCookie = cookieStore.get('token');
  
  const res = await fetch('http://your-go-api/list', {
    headers: {
      // 转发所有Cookie，或仅携带token
      Cookie: tokenCookie ? `${tokenCookie.name}=${tokenCookie.value}` : cookieStore.toString(),
    },
    // 如果是跨域，确保Go服务配置了CORS允许凭证
    credentials: 'include',
  });
  
  return res.json();
}

2. Pages Router（getServerSideProps） #

从context.req.headers中获取Cookie并转发：

export async function getServerSideProps(context) {
  const res = await fetch('http://your-go-api/list', {
    headers: {
      Cookie: context.req.headers.cookie || '',
    },
    credentials: 'include',
  });
  
  const listData = await res.json();
  return { props: { listData } };
}

三、额外检查项 #

1. CORS配置：如果Go服务与Next.js跨域，需确保Go服务的CORS配置允许携带凭证：

   // Gin的CORS中间件示例
   config := cors.DefaultConfig()
   config.AllowOrigins = []string{"https://your-nextjs-domain.com"}
   config.AllowCredentials = true // 必须开启
   c.Use(cors.New(config))
   

2. Next.js缓存策略：如果列表页面用了静态生成（SSG），页面重载时会直接使用缓存数据，不会发起新请求。需将页面设为动态渲染：
   • App Router：在页面组件顶部添加export const dynamic = 'force-dynamic';
   • Pages Router：改用getServerSideProps替代getStaticProps
3. 浏览器缓存：清空浏览器缓存或使用无痕模式测试，排除旧Cookie缓存的影响。

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