Flutter中WebView启用Cookies问题及WebViewCookie使用求助

问题重现 #

集成Paystack支付网关时，WebView加载后控制台出现以下错误：

I/chromium( 4534): [INFO:CONSOLE(1)] "Cookies are not authorized, we will not send any data.", source: https://checkout.paystack.com/js/chunk-vendors.441a57fb.js (1)
I/chromium( 4534): [INFO:CONSOLE(1)] "Error: Request failed with status code 400", source: https://checkout.paystack.com/js/rollbar.b8db5873.js (1)

这是因为Paystack的Checkout页面需要Cookie完成授权，但默认WebView配置未正确启用Cookie支持，尤其是第三方Cookie。

解决步骤：使用webview_cookie_manager包 #

1. 添加依赖 #

在pubspec.yaml中添加相关依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0 # 使用最新稳定版
  webview_cookie_manager: ^2.0.6 # 使用最新稳定版

执行flutter pub get完成依赖安装。

2. 初始化Cookie管理器 #

在你的支付页面Widget中创建WebViewCookieManager实例，建议在State类中初始化：

import 'package:webview_cookie_manager/webview_cookie_manager.dart';

class PaystackPaymentPage extends StatefulWidget {
  final String paystackCheckoutUrl;
  const PaystackPaymentPage({super.key, required this.paystackCheckoutUrl});

  @override
  State<PaystackPaymentPage> createState() => _PaystackPaymentPageState();
}

class _PaystackPaymentPageState extends State<PaystackPaymentPage> {
  final CookieManager _cookieManager = CookieManager();
  late WebViewController _webViewController;
  int _loadProgress = 0;
  // ...
}

3. 配置WebView并启用Cookie #

在WebView初始化中完成核心配置：启用JavaScript、允许第三方Cookie、预配置Paystack域名的Cookie权限。

完整代码示例：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_cookie_manager/webview_cookie_manager.dart';

class PaystackPaymentPage extends StatefulWidget {
  final String paystackCheckoutUrl;
  const PaystackPaymentPage({super.key, required this.paystackCheckoutUrl});

  @override
  State<PaystackPaymentPage> createState() => _PaystackPaymentPageState();
}

class _PaystackPaymentPageState extends State<PaystackPaymentPage> {
  final CookieManager _cookieManager = CookieManager();
  late WebViewController _webViewController;
  int _loadProgress = 0;

  @override
  void initState() {
    super.initState();
    _setupWebViewController();
  }

  Future<void> _setupWebViewController() async {
    // 清除旧Cookie避免冲突
    await _cookieManager.clearCookies();

    _webViewController = WebViewController()
      // 必须启用JavaScript，Paystack依赖JS交互
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (progress) {
            setState(() => _loadProgress = progress);
          },
          onPageFinished: (_) {
            setState(() => _loadProgress = 100);
          },
        ),
      )
      // 配置Paystack域名的Cookie权限
      ..setCookie(
        const WebViewCookie(
          name: 'paystack_auth',
          value: 'allowed',
          domain: 'checkout.paystack.com',
          path: '/',
        ),
      )
      ..loadRequest(Uri.parse(widget.paystackCheckoutUrl));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Paystack Payment')),
      body: Stack(
        children: [
          WebViewWidget(controller: _webViewController),
          if (_loadProgress < 100)
            LinearProgressIndicator(value: _loadProgress / 100),
        ],
      ),
    );
  }
}

4. 平台额外配置 #

Android

在android/app/src/main/AndroidManifest.xml中添加配置：

<application
  ...
  android:usesCleartextTraffic="true"> <!-- HTTP URL需要，HTTPS可忽略 -->
  ...
</application>

iOS

在ios/Runner/Info.plist中添加以下配置，允许第三方Cookie：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/> <!-- 测试环境用，正式环境建议配置特定域名 -->
</dict>
<key>WKAppBoundDomains</key>
<array>
  <string>checkout.paystack.com</string>
</array>

关键说明 #

• webview_cookie_manager用于统一管理WebView Cookie，确保Paystack域名能正常读写Cookie
• 必须启用JavaScript，Paystack的Checkout页面依赖JS渲染和交互
• 第三方Cookie配置是核心，默认WebView会阻止跨域Cookie，而Paystack属于第三方域名

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