Golang后端与Flutter前端的HTTPOnly Cookie配置及交互问题

方案一：Golang读取HTTPOnly Cookie后传递用户信息给Flutter #

场景1：Flutter Web（通过初始HTML插值传递） #

当用户访问Flutter Web入口页时，Golang先读取请求中的HTTPOnly Cookie，验证会话有效性后，把用户信息作为全局变量注入到返回的HTML里，Flutter Web通过JS互调获取该信息：

1. Golang后端处理逻辑：

func serveFlutterIndex(w http.ResponseWriter, r *http.Request) {
    // 读取Cookie中的会话ID
    sessionCookie, err := r.Cookie("session_id")
    if err != nil {
        // 未登录状态，返回默认HTML
        http.ServeFile(w, r, "build/web/index.html")
        return
    }

    // 从会话存储（如Redis）查询用户信息
    userInfo, err := getUserInfoBySessionID(sessionCookie.Value)
    if err != nil {
        http.ServeFile(w, r, "build/web/index.html")
        return
    }

    // 读取原始HTML文件
    htmlContent, err := os.ReadFile("build/web/index.html")
    if err != nil {
        http.Error(w, "Internal Server Error", http.StatusInternalServerError)
        return
    }

    // 将用户信息转为JSON，注入到HTML的script标签中
    userJSON, _ := json.Marshal(userInfo)
    injectedHTML := strings.Replace(string(htmlContent), "</head>", 
        fmt.Sprintf("<script>window.userInfo = %s;</script></head>", userJSON), 1)

    // 返回注入后的HTML
    w.Header().Set("Content-Type", "text/html")
    w.Write([]byte(injectedHTML))
}

2. Flutter Web读取用户信息：

import 'dart:js' as js;

void main() {
    // 读取全局变量中的用户信息
    dynamic userInfo = js.context['userInfo'];
    if (userInfo != null) {
        // 填充到Flutter页面
        print("当前用户：${userInfo['username']}");
    }
    runApp(MyApp());
}

场景2：Flutter移动端/通用API方式 #

Flutter发起HTTP请求时自动携带存储的Cookie（需配置Cookie管理），Golang验证Cookie后，通过API返回用户信息，Flutter拿到后直接填充数据：

1. Golang API接口：

func getUserInfoHandler(w http.ResponseWriter, r *http.Request) {
    sessionCookie, err := r.Cookie("session_id")
    if err != nil {
        http.Error(w, "Unauthorized", http.StatusUnauthorized)
        return
    }

    userInfo, err := getUserInfoBySessionID(sessionCookie.Value)
    if err != nil {
        http.Error(w, "Unauthorized", http.StatusUnauthorized)
        return
    }

    // 返回用户信息JSON
    w.Header().Set("Content-Type", "application/json")
    json.NewEncoder(w).Encode(userInfo)
}

2. Flutter端请求示例（使用dio库）：

import 'package:dio/dio.dart';
import 'package:dio_cookie_manager/dio_cookie_manager.dart';
import 'package:cookie_jar/cookie_jar.dart';

void main() async {
    Dio dio = Dio();
    // 配置持久化CookieJar，自动管理Cookie
    CookieJar cookieJar = PersistCookieJar(storage: FileStorage("cookies"));
    dio.interceptors.add(CookieManager(cookieJar));

    // 请求用户信息接口
    try {
        Response response = await dio.get("http://your-backend.com/api/user-info");
        if (response.statusCode == 200) {
            var userInfo = response.data;
            // 填充到页面
            print("用户ID：${userInfo['id']}");
        }
    } catch (e) {
        print("未登录或会话过期");
    }
}

方案二：Golang返回HTTPOnly Cookie并让Flutter自动持久化 #

1. Golang登录接口设置HTTPOnly Cookie #

登录验证通过后，后端设置HTTPOnly Cookie，浏览器/Flutter的Cookie管理器会自动存储：

func loginHandler(w http.ResponseWriter, r *http.Request) {
    // 验证用户名密码逻辑
    username := r.FormValue("username")
    password := r.FormValue("password")
    if !validateCredentials(username, password) {
        http.Error(w, "Invalid credentials", http.StatusUnauthorized)
        return
    }

    // 生成会话ID并存入Redis（设置过期时间）
    sessionID := generateSessionID()
    saveSessionToRedis(sessionID, username)

    // 设置HTTPOnly Cookie
    cookie := &http.Cookie{
        Name:     "session_id",
        Value:    sessionID,
        HttpOnly: true,
        Secure:   true, // 生产环境启用HTTPS时设为true
        Path:     "/",
        MaxAge:   86400, // 24小时过期
    }
    http.SetCookie(w, cookie)

    // 返回登录成功响应
    w.WriteHeader(http.StatusOK)
    w.Write([]byte("Login successful"))
}

2. Flutter端自动管理Cookie #

• Flutter Web：浏览器自动处理HTTPOnly Cookie的存储和携带，无需额外代码，后续请求会自动带上Cookie。
• Flutter移动端：使用dio配合cookie_jar库，配置后自动持久化Cookie并在请求时携带，代码参考方案一场景2中的Dio配置部分。

关键注意事项 #

• 跨域配置：如果Flutter Web和Golang后端跨域，需在Golang中配置CORS允许凭证携带：

func corsMiddleware(next http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        w.Header().Set("Access-Control-Allow-Origin", "https://your-flutter-web-domain.com")
        w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
        w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
        w.Header().Set("Access-Control-Allow-Credentials", "true")
        if r.Method == "OPTIONS" {
            w.WriteHeader(http.StatusOK)
            return
        }
        next.ServeHTTP(w, r)
    })
}

• 会话存储：务必用Redis等持久化存储管理会话，避免内存存储导致服务重启后会话丢失。
• 安全配置：生产环境启用HTTPS，设置Secure: true，防止Cookie被明文传输窃取。

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