Next.js13 App目录+Gin服务：响应头含Cookie但浏览器不存储

核心问题及修复步骤： #

• CORS规则冲突：
  当Access-Control-Allow-Credentials设为true时，Access-Control-Allow-Origin不能使用*通配符。浏览器的CORS安全机制禁止这种组合，必须指定具体的前端源地址（比如本地开发的http://localhost:3000）。

• Secure属性不兼容本地HTTP环境：
  Cookie中的Secure属性要求仅通过HTTPS传输Cookie。如果本地开发使用HTTP协议（Next.js默认启动的是HTTP服务），浏览器会直接拒绝存储带Secure标记的Cookie。本地调试时可暂时移除该属性，上线部署到HTTPS环境后再添加。

• 请求需显式携带凭证配置：
  在Next.js的请求代码中，必须明确设置credentials: 'include'（无论使用fetch还是第三方请求库如axios），否则浏览器不会处理响应中的Cookie。

代码示例 #

Gin服务器CORS中间件修改：

func CORSMiddleware() gin.HandlerFunc {
    return func(c *gin.Context) {
        // 获取请求头中的Origin，动态允许合法源
        origin := c.GetHeader("Origin")
        c.Header("Access-Control-Allow-Origin", origin)
        c.Header("Access-Control-Allow-Credentials", "true")
        c.Header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
        c.Header("Access-Control-Allow-Headers", "Content-Type, Authorization")

        // 处理OPTIONS预检请求
        if c.Request.Method == "OPTIONS" {
            c.AbortWithStatus(204)
            return
        }
        c.Next()
    }
}

Next.js请求配置示例（fetch）：

async function login() {
  const response = await fetch('http://localhost:8080/api/auth/login', {
    method: 'POST',
    credentials: 'include', // 关键配置，必须添加
    body: JSON.stringify({ username: 'test', password: '123456' }),
    headers: {
      'Content-Type': 'application/json',
    },
  });
  const data = await response.json();
  // 此时Cookie已被浏览器存储
}

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