Flutter Web 3.13.8：如何在Due组件中获取请求携带的Cookie？

在Flutter 3.13.8的Web环境中，要获取请求携带的Cookie，需要借助浏览器原生的Cookie API（通过dart:html包实现）——因为Flutter本身没有跨平台的Cookie直接读取能力，而Web端可以直接操作浏览器的Cookie存储。

具体实现步骤 #

• 引入Web专属API包：导入dart:html包，同时用kIsWeb判断环境，避免非Web平台编译报错。
• 读取并解析Cookie：通过document.cookie获取当前域名下所有Cookie的字符串，再将其解析为键值对Map方便使用。

代码示例 #

import 'dart:html' as html;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class DuePage extends StatelessWidget {
  const DuePage({super.key});

  // 解析Cookie字符串为键值对Map
  Map<String, String> _parseCookieString() {
    final cookieStr = html.document.cookie ?? '';
    final cookieMap = <String, String>{};
    
    for (final cookie in cookieStr.split('; ')) {
      final keyValue = cookie.split('=');
      if (keyValue.length == 2) {
        cookieMap[keyValue[0].trim()] = keyValue[1].trim();
      }
    }
    return cookieMap;
  }

  @override
  Widget build(BuildContext context) {
    // 仅在Web环境下执行Cookie读取逻辑
    if (kIsWeb) {
      final allCookies = _parseCookieString();
      // 根据需求获取指定Cookie，比如名为"session_id"的Cookie
      final sessionId = allCookies['session_id'];
      print('获取到的session_id: $sessionId');
    }

    return Scaffold(
      appBar: AppBar(title: const Text('Due页面')),
      body: const Center(child: Text('Due组件内容')),
    );
  }
}

关键注意事项 #

• HttpOnly Cookie限制：如果目标Cookie设置了HttpOnly属性，浏览器会禁止前端JavaScript（包括Flutter Web的dart:html调用）读取，这种情况需要后端在页面渲染时将Cookie内容注入到全局变量，或者通过接口返回给Flutter应用。
• 跨域与SameSite策略：若Cookie来自跨域请求，需确保Cookie的SameSite设置符合浏览器要求（如SameSite=None配合Secure），否则无法在当前页面读取。
• 平台兼容性：必须用kIsWeb做环境判断，否则在iOS/Android等非Web平台编译时会报错。

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