Vue.js向Golang服务器发起登录请求后Cookie不显示的问题咨询

嘿，我之前也碰到过一模一样的情况！浏览器没自动保存Cookie，完全不需要你手动用JavaScript去设置，大概率是跨域配置或者Cookie属性设置不对导致的，咱们一步步排查解决：

一、先排查跨域场景（最常见原因） #

如果你的Vue前端和Go服务器不在同一个域名/端口下（比如前端跑在localhost:8080，后端在localhost:8081），浏览器的同源策略会限制Cookie的自动存储，这时候需要前后端同时配置：

1. 后端Go配置CORS，允许携带凭证 #

你需要在Go的CORS中间件里明确允许凭证，并且指定具体的前端域名（不能用*，否则无法携带Cookie）。举个用gorilla/handlers的示例：

import "github.com/gorilla/handlers"

func main() {
    // 允许的请求头
    allowedHeaders := handlers.AllowedHeaders([]string{"Content-Type"})
    // 允许的前端域名，替换成你的Vue地址
    allowedOrigins := handlers.AllowedOrigins([]string{"http://localhost:8080"})
    // 关键：允许携带凭证
    allowCredentials := handlers.AllowCredentials()

    // 给登录接口加上CORS配置
    http.Handle("/login", handlers.CORS(allowedHeaders, allowedOrigins, allowCredentials)(loginHandler))
    // ...其他启动代码
}

2. 前端Vue请求开启凭证携带 #

不管你用axios还是fetch，都要开启携带凭证的配置：

• 用axios的话：

axios.post('http://你的Go服务器地址/login', {
    // 你的登录参数（比如username、password）
}, {
    withCredentials: true // 关键配置
})

• 用fetch的话：

fetch('http://你的Go服务器地址/login', {
    method: 'POST',
    credentials: 'include', // 关键配置
    body: JSON.stringify({/* 登录参数 */}),
    headers: {
        'Content-Type': 'application/json'
    }
})

二、检查Cookie的属性设置 #

就算是同域请求，Cookie的某些属性没配置对也会导致浏览器不存储，修改你的Go代码里的Cookie设置：

expiration := time.Now().Add(365 * 24 * time.Hour)
cookie := http.Cookie{
    Name:     "csrftoken",
    Value:    "abcd",
    Expires:  expiration,
    Path:     "/", // 确保Cookie在整个站点生效，默认是当前请求路径（比如/login）
    SameSite: http.SameSiteLaxMode, // 同域用Lax即可，跨域的话改成SameSiteNoneMode，同时要加Secure: true
    // Secure:   true, // 跨域用SameSiteNone时必须开启，本地HTTP开发可以暂时注释
    HttpOnly: false, // 如果不需要JS读取Cookie，建议设为true更安全，不影响浏览器存储
}
http.SetCookie(w, &cookie)

三、验证步骤 #

1. 打开浏览器开发者工具 → Network标签，找到登录的POST请求
2. 查看Response Headers里是否有Set-Cookie字段：
   • 如果没有：说明后端没正确设置Cookie，检查Go代码里的http.SetCookie是否执行，有没有被其他中间件覆盖响应头
   • 如果有但浏览器没存储：回到上面的跨域配置或Cookie属性检查

总结 #

完全不需要手动用JS设置Cookie，只要前后端的跨域配置和Cookie属性都正确，浏览器会自动处理存储和后续请求携带Cookie的逻辑。

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