Flutter如何获取WebView中所有Cookie并携带该Cookie发起Dio请求

解决方案 #

你用的flutter_inappwebview已经封装了跨端的Cookie操作能力，不需要单独处理iOS原生的sharedHTTPCookieStorage，只需要把WebView的Cookie同步到Dio的CookieJar中即可，修改以下三处代码：

1. 把PersistCookieJar提为类的全局成员，方便后续写入Cookie

class _MyPageState extends State<MyPage> {
  final _dio = Dio();
  late PersistCookieJar _cj; // 新增全局CookieJar变量
  // 其余原有代码不变
}

2. 修改setupCookieManager方法，给全局的_cj赋值

setupCookieManager() async {
  _dio.interceptors.add(LogInterceptor());
  _dio.options.receiveTimeout = 10000;

  Directory appDocDir = await getApplicationDocumentsDirectory();
  String appDocPath = appDocDir.path;

  // 赋值给全局变量
  _cj = PersistCookieJar(
      ignoreExpires: true, storage: FileStorage("$appDocPath/.cookies/"));
  _dio.interceptors.add(cm.CookieManager(_cj));

  _dio.options.baseUrl = host;
}

3. 修改onLoadStop回调，同步WebView的Cookie到Dio的CookieJar

onLoadStop: (c, url) async {
  print('onLoadStop: $url');
  if (url == null) return;
  // 跨端获取当前页面所有Cookie，兼容安卓iOS
  final webviewCookies = await CookieManager.instance().getCookies(url: url);
  // 转换为Dart标准Cookie对象
  final dartCookies = webviewCookies.map((webCookie) {
    return Cookie(webCookie.name, webCookie.value)
      ..domain = webCookie.domain
      ..path = webCookie.path ?? '/'
      ..expires = webCookie.expiresDate
      ..secure = webCookie.isSecure ?? false
      ..httpOnly = webCookie.isHttpOnly ?? false;
  }).toList();
  // 写入Dio的CookieJar
  await _cj.saveFromResponse(Uri.parse(host), dartCookies);
  print('Cookie同步完成，共${dartCookies.length}条');
},

补充说明 #

• 该方案纯Flutter实现，无需编写原生代码，同时兼容安卓、iOS两端
• 如果需要WebView复用Dio请求产生的Cookie，反向操作即可：从_cj中取出对应域名的Cookie，调用CookieManager.instance().setCookie逐个写入WebView
• 如果涉及多域名场景，需要将Cookie对应写入匹配的Uri，避免Dio请求时无法匹配到对应Cookie

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