Flutter WebView加载网页时如何拦截网络请求？

在Flutter中使用WebView加载网页时，如何拦截并修改网络请求？目前我的应用需要在特定条件下阻止某些URL的加载，或者动态替换请求内容。尝试过webview_flutter插件，但文档中没有明确说明拦截机制。是否需要实现原生平台代码（Android/iOS）来扩展功能？还是说Flutter层有现成的解决方案？如果能提供具体代码示例或推荐支持请求拦截的第三方WebView插件会更实用。

3 回复

在 Flutter 中使用 WebView 加载网页时，可以通过 WebView 插件的 onLoadResource 或 onReceivedHttpError 等回调来拦截网络请求。推荐使用 webview_flutter 插件，它提供了对 WebView 的更多控制。

以下是一个简单的示例：

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

class InterceptRequestPage extends StatefulWidget {
  @override
  _InterceptRequestPageState createState() => _InterceptRequestPageState();
}

class _InterceptRequestPageState extends State<InterceptRequestPage> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('拦截网络请求')),
      body: WebView(
        initialUrl: 'https://example.com',
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        onPageStarted: (url) {
          print('页面开始加载: $url');
        },
        // 拦截资源加载
        onLoadResource: (resource) {
          print('加载资源: $resource');
          return Future.value(true);
        },
      ),
    );
  }
}

通过 onLoadResource 回调，可以监控并拦截每个资源的加载。如果需要更复杂的拦截逻辑（如修改请求或响应），可以结合平台通道调用原生代码实现。

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


在 Flutter 中使用 WebView 加载网页时，可以通过 WebView 插件（如 webview_flutter）的 NavigationDelegate 来拦截网络请求。以下是实现步骤：

  1. 创建一个 NavigationDelegate 实例，并重写其方法，例如 shouldInterceptRequest（部分旧版本可能不支持此方法，需用 JavaScript 注入替代）。
  2. 在 shouldInterceptRequest 方法中，检查请求的 URL，决定是否拦截或放行。
  3. 如果需要自定义响应内容，可以返回一个 WebResourceResponse 对象。

示例代码：

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;
        _controller.setNavigationDelegate(
          NavigationDelegate(
            // 拦截请求
            onRequestStarted: (request) {
              print('Loading: ${request.url}');
            },
            shouldInterceptRequest: (request) async {
              if (request.url.contains('ads')) {
                // 拦截广告请求
                return WebResourceResponse(
                  mimeType: 'text/html',
                  encoding: Encoding.getByName('utf-8'),
                  data: Uint8List.fromList('<h1>Ad Blocked</h1>'.codeUnits),
                );
              }
              return null; // 放行其他请求
            },
          ),
        );
      },
    );
  }
}

注意：某些插件可能不完全支持 shouldInterceptRequest，可以结合 JavaScript 注射动态修改页面内容以实现类似效果。

在Flutter的WebView中拦截网络请求可以通过flutter_inappwebview插件实现。下面是具体实现方法：

  1. 首先添加依赖：
dependencies:
  flutter_inappwebview: ^5.7.0
  1. 拦截请求的代码示例：
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView拦截请求')),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse('https://example.com')),
        onWebViewCreated: (controller) {
          webViewController = controller;
        },
        shouldOverrideUrlLoading: (controller, navigationAction) async {
          final url = navigationAction.request.url?.toString() ?? '';
          
          // 拦截特定URL
          if (url.contains('ads.example.com')) {
            return NavigationActionPolicy.CANCEL; // 阻止加载
          }
          
          return NavigationActionPolicy.ALLOW; // 允许加载
        },
      ),
    );
  }
}

主要功能点：

  • 使用shouldOverrideUrlLoading回调拦截URL请求
  • 通过NavigationActionPolicy.CANCEL阻止特定请求
  • 支持正则表达式匹配更复杂的拦截规则

注意事项：

  1. iOS需要额外配置App Transport Security
  2. 拦截只能针对主文档请求，不能拦截页面内的XHR/Fetch请求
  3. 对于更复杂的拦截需求可以考虑使用WebView的evaluateJavascript注入JS拦截代码
回到顶部