Go服务返回Set-Cookie但浏览器不保存Cookie问题（React前端场景）

现有配置的核心错误点 #

• Cookie Path配置错误：当前给Cookie设置的Path: "/api"，按照浏览器Cookie规范，只有当发起Set-Cookie的请求路径本身在/api前缀下、且后续请求路径也匹配/api前缀时，浏览器才会存储并携带该Cookie。如果登录接口路径不是/api开头（比如是/login而非/api/login），浏览器会直接丢弃该Cookie，不会持久化保存。
• 前端未开启跨域凭证携带配置：后端已经配置AllowCredentials: true，但如果前端发起请求时没有显式开启凭证携带开关，浏览器会默认忽略跨域响应里的Set-Cookie头，不会保存Cookie。
• CORS预检请求配置缺失：现有CORS配置的允许方法里没有加OPTIONS，跨域的POST等非简单请求会先发OPTIONS预检请求，预检不通过的话后续正式请求的Cookie也会被拦截；同时AllowedHeaders配置为通配符*，在开启凭证模式时部分浏览器会直接拦截跨域响应，不认可通配符配置。

修复方案 #

1. 后端Cookie配置调整 #

将Cookie的Path改为/，适配全站接口的Cookie携带需求，本地HTTP开发环境不要开启Secure属性（该属性仅在HTTPS环境下生效，开启后HTTP环境下Cookie无法存储）：

userDetails := types.User{Name: user.Name, Email: user.Email, Profile_Pic: user.Profile_Pic}
cookie := &http.Cookie{
    Name:     "accessToken",
    Value:    token,
    MaxAge:   int(maxAge),
    Path:     "/", // 修正Path配置，全站生效
    HttpOnly: true,
    SameSite: http.SameSiteLaxMode,
    // 本地开发环境注释Secure配置，上线HTTPS时再打开
    // Secure: true,
}
http.SetCookie(w, cookie)
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(userDetails)

2. 后端CORS配置调整 #

补充OPTIONS方法支持，显式列出允许的请求头，不要用通配符：

r.Use(cors.Handler(cors.Options{
    AllowOriginFunc:  AllowOriginFunc,
    AllowedMethods:   []string{"GET", "POST", "DELETE", "OPTIONS"}, // 补充OPTIONS方法处理预检
    AllowedHeaders:   []string{"Content-Type", "Authorization"}, // 显式声明允许的请求头，替代通配符*
    AllowCredentials: true,
}))

func AllowOriginFunc(r *http.Request, origin string) bool {
    if origin == "http://localhost:3000" || origin == "http://127.0.0.1:3000" {
        return true
    }
    return false
}

3. 前端请求配置补充 #

必须显式开启跨域请求携带凭证的配置：

• 如果使用axios请求库，添加全局配置：

import axios from 'axios'
// 全局开启跨域请求携带Cookie
axios.defaults.withCredentials = true

• 如果使用原生fetch发起请求，每个请求添加credentials参数：

fetch('http://你的后端地址/登录接口路径', {
  method: 'POST',
  credentials: 'include', // 必须配置，否则跨域请求不会保存、携带Cookie
  headers: {
    'Content-Type': 'application/json'
  },
  // 其他请求参数如请求体等
})

验证步骤 #

1. 修复配置后，先清空浏览器中对应域名下的所有缓存Cookie，重启前后端服务
2. 重新发起登录请求，打开浏览器开发者工具的「应用/Application」面板，找到对应后端域名下的Cookie列表，确认accessToken是否存在
3. 发起其他需要鉴权的接口请求，查看请求头中是否自动携带了Cookie字段

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