如何将Golang Gin会话传递至Next.js实现计数递增

1. 先检查后端Gin的CORS配置 #

必须开启AllowCredentials，且AllowOrigins不能用通配符*，要指定前端具体域名：

import "github.com/gin-contrib/cors"

func main() {
    router := gin.Default()
    router.Use(cors.New(cors.Config{
        AllowOrigins:     []string{"http://localhost:3000"}, // 你的Next.js前端地址
        AllowMethods:     []string{"GET", "POST"},
        AllowHeaders:     []string{"Content-Type"},
        AllowCredentials: true, // 核心：允许跨域携带Cookie
    }))
    // 你的会话和计数逻辑...
}

2. 前端fetch必须配置credentials #

不管是同域还是跨域请求，只要需要处理Cookie，必须在fetch选项中添加credentials: 'include'：

// 客户端组件中使用fetch
async function incrementCount() {
  try {
    const res = await fetch('http://localhost:8080/api/count', {
      method: 'GET',
      credentials: 'include', // 让浏览器自动携带、保存Cookie
    });
    const data = await res.json();
    console.log("当前计数:", data.count);
  } catch (err) {
    console.error("请求失败:", err);
  }
}

3. 区分Next.js组件类型的差异 #

• 客户端组件：运行在浏览器端，配置credentials: 'include'后会自动处理Cookie的携带和保存，浏览器能看到Set-Cookie响应头并存储Cookie。
• 服务器组件：运行在服务器端，没有浏览器的Cookie上下文，需要手动传递请求中的Cookie给后端：

// 服务器组件中导入next/headers的cookies
import { cookies } from 'next/headers';

async function ServerComponent() {
  const cookieStr = cookies().toString();
  const res = await fetch('http://localhost:8080/api/count', {
    headers: {
      Cookie: cookieStr, // 把浏览器的Cookie传递给后端
    },
  });
  const data = await res.json();
  return <div>当前计数：{data.count}</div>;
}

注意：服务器组件的响应不会直接设置浏览器Cookie，若需要浏览器保存Cookie，建议在客户端组件发起请求。

4. 验证Cookie是否生效 #

请求后打开浏览器开发者工具：

• 进入Application标签 -> Cookies -> 你的前端域名，查看是否存在会话Cookie（名称对应Gin会话配置的mysession或你自定义的名称）。
• 若Cookie是HttpOnly类型，document.cookie无法读取，但浏览器会自动携带到请求头，这是安全设计，无需手动处理。

5. 前端获取Cookie值的方法 #

如果Cookie未设置HttpOnly，可以在客户端组件中读取：

import { cookies } from 'next/navigation';

function ClientComponent() {
  const cookieStore = cookies();
  const sessionCookie = cookieStore.get('mysession'); // 替换为你的Cookie名称
  return <div>会话Cookie值：{sessionCookie?.value}</div>;
}

若Cookie是HttpOnly，前端无法读取，也不需要读取——浏览器会自动在后续请求中携带。

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