Flutter集成Swarmify遇Cookie禁用错误，求解决方案

错误原因 #

你遇到的Uncaught SecurityError是因为InAppWebView的baseUrl被设置为data:类型URL，浏览器安全策略会禁用该类型URL下的Cookie读取功能，而Swarmify的依赖脚本需要读写Cookie才能完成初始化，因此触发了错误。

修复步骤 #

1. 替换baseUrl为合法HTTP/HTTPS域名：将baseUrl从data:类型改为Swarmify的CDN域名（如https://assets.swarmcdn.com），让浏览器识别页面来源为常规域名，允许Cookie操作。
2. 确保WebView启用必要权限：开启JavaScript支持、允许第三方Cookie，并配置Cookie管理器确保Cookie正常存储。

修改后的完整代码 #

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:meme/core/app_theme/app_theme.dart';

class TestSwarmVideo extends StatefulWidget {
  const TestSwarmVideo({super.key});

  @override
  State<TestSwarmVideo> createState() => _TestSwarmVideoState();
}

class _TestSwarmVideoState extends State<TestSwarmVideo> {
  InAppWebViewController? webView;
  CookieManager? cookieManager;

  @override
  void initState() {
    cookieManager = CookieManager.instance();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Meem',
      theme: CustomTheme.themeData,
      home: Scaffold(
        appBar: AppBar(),
        body: InAppWebView(
          initialData: InAppWebViewInitialData(
            data: '''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1> Test Test </h1> 
    <smartvideo
        class="swarm-fluid"
        controls
        playsinline
        width="420" height="315"
        src="swarmify://1948d07135515f5d1841d5f27b5bdd2df16a97d10662e9d88f8b63ba898c6218"
    ></smartvideo>
    <h1> Video Ends Here </h1> 

    <script data-cfasync="false">
        var swarmoptions = {
            swarmcdnkey: "xxxxxxxxxxxxxxx",
            iframeReplacement: "iframe",
            autoreplace: {
                youtube: false
            }
        };
    </script>
    <script async data-cfasync="false" src="https://assets.swarmcdn.com/cross/swarmdetect.js"></script>
</body>
</html>
''',
            baseUrl: Uri.parse("https://assets.swarmcdn.com"),
          ),
          initialOptions: InAppWebViewGroupOptions(
            crossPlatform: InAppWebViewOptions(
              cacheEnabled: true,
              javaScriptEnabled: true,
              javaScriptCanOpenWindowsAutomatically: true,
              allowFileAccessFromFileURLs: true,
              allowUniversalAccessFromFileURLs: true,
              allowThirdPartyCookies: true,
            ),
            android: AndroidInAppWebViewOptions(
              allowFileAccess: true,
              builtInZoomControls: false,
              supportMultipleWindows: false,
            ),
            ios: IOSInAppWebViewOptions(
              allowsInlineMediaPlayback: true,
            ),
          ),
          onWebViewCreated: (controller) {
            webView = controller;
            // 可选：清除旧Cookie避免冲突
            cookieManager?.deleteAllCookies();
          },
          onLoadStop: (controller, url) async {
            // 可选：验证Cookie状态
            List<Cookie> cookies = await cookieManager?.getCookies(url: url) ?? [];
            log("当前页面Cookie: ${cookies.toString()}");
          },
        ),
      ),
    );
  }
}

额外说明 #

• 删除了代码中未使用的WebViewController实例，避免冗余。
• 添加allowThirdPartyCookies: true确保Swarmify域名下的第三方Cookie可以正常存储和读取。
• iOS端配置allowsInlineMediaPlayback: true，匹配视频标签的playsinline属性，确保视频内联播放。

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