Flutter webview 拦截所有请求并添加 headers

Posted

技术标签:

【中文标题】Flutter webview 拦截所有请求并添加 headers【英文标题】:Flutter webview intercept and add headers to all requests 【发布时间】:2020-08-12 08:56:53 【问题描述】:

使用 webview_flutter 包,我可以加载我的网站并将会话 cookie 添加到初始 URL。

_controller.future.then((controller) 
  _webViewController = controller;
  Map<String, String> header = 'Cookie': 'ci_session=$widget.sessionId';
  _webViewController.loadUrl('https://xxxx.com', headers: header);
);

为了保持会话继续进行,我需要为所有请求添加相同的标头,而不仅仅是初始请求。 有没有什么办法可以拦截所有请求并通过添加header来修改它们?

我找到的最接近的东西是navigationDelegate,但它只返回一个NavigationDecision,这在我的情况下没有用。

【问题讨论】:

你找到 webview_flutter 包的解决方案了吗 【参考方案1】:

你可以使用我的插件flutter_inappwebview,这是一个 Flutter 插件,允许你添加内联 WebViews 或打开一个应用内浏览器窗口,并且有很多事件、方法和选项来控制 WebViews。

如果您需要为每个请求添加自定义标头,您可以使用shouldOverrideUrlLoading 事件(您需要使用useShouldOverrideUrlLoading: true 选项启用它)。

相反,如果您需要将 cookie 添加到 WebView,您可以使用 CookieManager 类(CookieManager.setCookie 方法设置 cookie)。

这是一个在 WebView 中设置 cookie(名为 ci_session)并为每个请求设置自定义标头(名为 My-Custom-Header)的示例:

import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async 
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());


class MyApp extends StatefulWidget 
  @override
  _MyAppState createState() => new _MyAppState();


class _MyAppState extends State<MyApp> 
  InAppWebViewController webView;
  CookieManager _cookieManager = CookieManager.instance();

  @override
  void initState() 
    super.initState();

    _cookieManager.setCookie(
      url: "https://github.com/",
      name: "ci_session",
      value: "54th5hfdcfg34",
      domain: ".github.com",
      isSecure: true,
    );
  

  @override
  void dispose() 
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
            child: Column(children: <Widget>[
          Expanded(
              child: InAppWebView(
            initialUrl: "https://github.com/",
            initialHeaders: 'My-Custom-Header': 'custom_value=564hgf34',
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                debuggingEnabled: true,
                useShouldOverrideUrlLoading: true
              ),
            ),
            onWebViewCreated: (InAppWebViewController controller) 
              webView = controller;
            ,
            onLoadStart: (InAppWebViewController controller, String url) ,
            onLoadStop: (InAppWebViewController controller, String url) async 
              List<Cookie> cookies = await _cookieManager.getCookies(url: url);
              cookies.forEach((cookie) 
                print(cookie.name + " " + cookie.value);
              );
            ,
            shouldOverrideUrlLoading: (controller, shouldOverrideUrlLoadingRequest) async 
              print("URL: $shouldOverrideUrlLoadingRequest.url");

              if (Platform.isandroid || shouldOverrideUrlLoadingRequest.iosWKNavigationType == IOSWKNavigationType.LINK_ACTIVATED) 
                controller.loadUrl(url: shouldOverrideUrlLoadingRequest.url, headers: 
                  'My-Custom-Header': 'custom_value=564hgf34'
                );
                return ShouldOverrideUrlLoadingAction.CANCEL;
              
              return ShouldOverrideUrlLoadingAction.ALLOW;
            ,
          ))
        ])),
      ),
    );
  

【讨论】:

尽管遇到了一些其他问题,但我最终还是使用了它。无论如何都会将其标记为正确答案。 插件相关的任何其他错误/问题,您可以在问题部分发布

以上是关于Flutter webview 拦截所有请求并添加 headers的主要内容,如果未能解决你的问题,请参考以下文章

如何拦截webview的post请求

UWP 拦截 Webview POST 请求并获取内容

android WebView拦截请求详解

Android WebView:拦截重定向请求?

android WebView拦截请求详解

Js 拦截全局ajax请求