Go后端与开发环境React前端共享Cookie认证问题

问题场景 #

Go后端通过Cookie实现身份认证，直接访问后端（8000端口）登录功能正常，但React前端（3000端口）登录后，响应头中能看到Set-Cookie字段，后续API请求却未携带该Cookie。

核心问题与修复方案 #

1. Cookie的Secure属性不匹配环境 #

开发环境下如果使用HTTP协议，Cookie的Secure: true会导致浏览器拒绝保存Cookie——该属性仅允许HTTPS连接下的Cookie被存储和发送。

修改Cookie配置：

cookie := &http.Cookie{
    Name:     "secret",
    Value:    "secretValue",
    Domain:   "localhost",
    Path:     "/",
    Expires:  time.Now().Add(24 * time.Hour),
    Secure:   false, // 开发环境改为false，生产环境切换为true
    HttpOnly: false,
}
c.Writer.Header().Set("Set-Cookie", cookie.String())

2. CORS配置中AllowOrigins不能用通配符* #

当AllowCredentials: true时，浏览器要求AllowOrigins必须是具体的源地址，不能使用*，否则会阻止凭证（Cookie）的传递。

修改CORS配置：

r.Use(cors.New(cors.Config{
    AllowOrigins:     []string{"http://localhost:3000"}, // 明确指定前端地址
    AllowMethods:     []string{"*"},
    AllowHeaders:     []string{"*"},
    ExposeHeaders:    []string{"*"},
    AllowCredentials: true,
    MaxAge:           24 * time.Hour,
}))

3. React请求需显式携带凭证 #

React发起请求时，必须明确告知浏览器要携带凭证，否则浏览器不会自动附加Cookie。

• 使用axios的示例：

  axios.post('http://localhost:8000/login', loginData, {
      withCredentials: true
  })
  

• 使用fetch的示例：

  fetch('http://localhost:8000/api/data', {
      credentials: 'include'
  })
  

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