在Flutter中使用WebView时，如何实现网络请求拦截？

在Flutter中使用WebView时，如何实现网络请求拦截？具体需要哪些步骤和代码示例？目前遇到的问题是WebView加载的页面中有第三方资源请求，想对特定URL进行拦截并修改请求头或阻止加载，但找不到可靠的实现方法。官方文档提到onNavigationRequest回调，但似乎只能拦截主框架请求，无法处理子资源（如JS/CSS）。有没有完整的解决方案，既能监控所有网络请求，又能动态注入自定义header或拦截广告请求？最好能兼容Android和iOS平台。

3 回复

作为一个屌丝程序员，今天来分享下Flutter中WebView的网络请求拦截和管理方法。首先需要引入webview_flutter插件。

  1. 拦截请求：通过WebView的onWebViewCreated回调获取WebViewController，然后使用evaluateJavascript注入JavaScript代码来拦截请求。比如拦截所有图片加载：
javascript:(function() { 
    var _originOpen = window.open;
    window.open = function(url, name, specs, replace) {
        console.log('Intercepted open:', url);
        return _originOpen.apply(this, arguments);
    };
})();

  1. 管理请求：可以创建一个自定义的HttpOverrides类重写fetchUrl等方法，用于监控、修改或阻止WebView发出的网络请求。例如记录请求URL并过滤掉不需要的内容。

  2. 缓存处理：如果想对资源进行本地缓存管理，可以通过设置WebView的缓存模式（如LOAD_CACHE_ELSE_NETWORK）以及监听缓存命中事件实现。

  3. 示例代码：

class MyHttpOverrides extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext? context) {
    final client = super.createHttpClient(context);
    client.badCertificateCallback = (cert, host, port) => true;
    return client;
  }
}

在main函数中执行HttpOverrides.global = MyHttpOverrides();即可全局生效。

这些方法可以帮助你更好地管理和优化WebView中的网络请求行为。

更多关于在Flutter中使用WebView时，如何实现网络请求拦截？的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


作为一个屌丝程序员，来教你用Flutter实现WebView请求拦截与网络请求管理。

首先，你需要使用webview_flutter插件。可以通过shouldInterceptRequest方法拦截请求。示例代码如下：

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

class MyWebView extends StatefulWidget {
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://example.com',
      onWebViewCreated: (controller) {
        _controller = controller;
      },
      javascriptMode: JavascriptMode.unrestricted,
      gestureNavigationEnabled: true,
      onWebResourceError: (error) {
        print("Error: ${error.errorCode} - ${error.description}");
      },
      // 拦截请求
      navigationDelegate: (NavigationRequest request) {
        if (request.url.contains('ads')) {
          print("Blocked ad request");
          return NavigationDecision.prevent;
        }
        print("Allowed request to ${request.url}");
        return NavigationDecision.navigate;
      },
    );
  }
}

通过这种方式，你可以拦截特定的URL请求，比如广告请求，还可以根据需求对请求做进一步处理，如修改请求参数、记录日志等。

Flutter WebView 请求拦截教程

在 Flutter 中拦截 WebView 的网络请求可以通过 webview_flutter 插件实现。以下是详细教程：

基本配置

首先添加依赖到 pubspec.yaml:

dependencies:
  webview_flutter: ^4.2.2

请求拦截实现

完整代码示例

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

class WebViewInterceptor extends StatefulWidget {
  const WebViewInterceptor({Key? key}) : super(key: key);

  @override
  _WebViewInterceptorState createState() => _WebViewInterceptorState();
}

class _WebViewInterceptorState extends State<WebViewInterceptor> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (NavigationRequest request) {
            // 拦截所有导航请求
            print('拦截到请求: ${request.url}');
            
            // 允许所有请求继续
            return NavigationDecision.navigate;
            
            // 或者阻止特定请求
            // if (request.url.contains('blocked.com')) {
            //   return NavigationDecision.prevent;
            // }
          },
        ),
      )
      ..loadRequest(Uri.parse('https://example.com'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('WebView拦截示例')),
      body: WebViewWidget(controller: _controller),
    );
  }
}

高级用法

1. 拦截特定类型的请求

NavigationDelegate(
  onNavigationRequest: (request) {
    if (request.url.endsWith('.mp4')) {
      print('拦截视频请求: ${request.url}');
      return NavigationDecision.prevent;
    }
    return NavigationDecision.navigate;
  },
)

2. 修改请求头

_controller.setNavigationDelegate(
  NavigationDelegate(
    onUrlChange: (UrlChange change) {
      _controller.loadRequest(
        Uri.parse(change.url!),
        headers: {'Custom-Header': 'value'},
      );
    },
  ),
);

3. Android 平台特定配置

对于 Android 平台，你还需要在 AndroidManifest.xml 中添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

注意事项

  1. 拦截功能在 iOS 和 Android 上都可用，但具体行为可能有细微差异
  2. onNavigationRequest 只能拦截导航请求，不能拦截页面内的资源请求(XHR, fetch等)
  3. 要拦截所有资源请求，需要更高级的解决方案，如使用插件或平台通道实现

希望这个教程能帮助你实现 Flutter WebView 的请求拦截功能！

回到顶部