webview_flutter 4.2.2中如何为HTML内URL请求添加请求头？

方案1：拦截所有资源请求并添加授权头 #

利用webview的NavigationDelegate拦截每个资源请求，手动为需要授权的请求添加authToken头，这是最通用的适配方案。

示例代码：

WebView(
  initialUrl: 'about:blank', // 先加载空白页
  onWebViewCreated: (controller) {
    // 加载目标HTML字符串
    controller.loadHtmlString('''
      <p style="margin: 0px">Hi Team,<br /></p>
      <p style="margin: 0px">&nbsp;<br /></p>
      <p style="margin: 0px">Kindly create new Subcategory as TNA360 under Systems<span class="font" style="font-family: Wingdings">à</span> Business Application.<br /></p>
      <p style="margin: 0px"><img width="11.2333in" height="3in" style="width: 11.2333in; height: 3in" id="Picture_x0020_4" src="你的图片URL" /></p>
    ''');
  },
  navigationDelegate: (NavigationRequest request) {
    // 仅对指定域名的资源请求添加授权头
    if (request.url.startsWith('你的资源域名前缀')) {
      // 构造带授权头的新请求
      final modifiedRequest = WebResourceRequest(
        url: Uri.parse(request.url),
        method: request.method,
        headers: {...request.headers, 'authToken': '你的token值'},
        body: request.body,
      );
      return NavigationDecision.navigate;
    }
    return NavigationDecision.navigate;
  },
  // Android端需单独配置WebViewClient处理资源请求
  androidWebViewClient: AndroidWebViewClient(
    onWebResourceRequest: (request) async {
      if (request.url.toString().startsWith('你的资源域名前缀')) {
        final newHeaders = Map<String, String>.from(request.headers);
        newHeaders['authToken'] = '你的token值';
        return WebResourceResponseAction.proceed(request.copyWith(headers: newHeaders));
      }
      return WebResourceResponseAction.proceed(request);
    },
  ),
)

注意：iOS和Android的资源拦截API存在差异，需要分别适配。iOS端可通过webview_flutter封装的WKNavigationDelegate对应方法实现类似逻辑。

方案2：修改HTML资源URL，携带token参数（需后端支持） #

如果后端允许通过URL参数传递授权token，可以直接修改HTML内的资源地址，把token拼接到URL末尾。

示例代码：

// 原始HTML字符串
String originalHtml = '''
  <p style="margin: 0px">Hi Team,<br /></p>
  <p style="margin: 0px">&nbsp;<br /></p>
  <p style="margin: 0px">Kindly create new Subcategory as TNA360 under Systems<span class="font" style="font-family: Wingdings">à</span> Business Application.<br /></p>
  <p style="margin: 0px"><img width="11.2333in" height="3in" style="width: 11.2333in; height: 3in" id="Picture_x0020_4" src="你的图片URL" /></p>
''';

// 替换资源URL，添加token参数
String token = '你的token值';
String modifiedHtml = originalHtml.replaceAllMapped(
  RegExp(r'src="([^"]+)"'),
  (match) {
    String url = match.group(1)!;
    if (url.startsWith('你的资源域名前缀')) {
      // 根据URL是否已有参数，选择拼接方式
      return url.contains('?') 
          ? 'src="$url&authToken=$token"' 
          : 'src="$url?authToken=$token"';
    }
    return match.group(0)!;
  },
);

// 加载修改后的HTML
WebView(
  initialUrl: 'about:blank',
  onWebViewCreated: (controller) {
    controller.loadHtmlString(modifiedHtml);
  },
)

此方案实现简单，但需注意token暴露在URL中的安全风险，且依赖后端支持参数形式的授权验证。

方案3：本地代理转发请求（复杂但灵活） #

如果上述方案都不适用，可以搭建本地HTTP代理，让webview的所有请求通过代理转发，代理在转发时自动添加授权头。

核心思路：

1. 使用dart:io启动本地HTTP服务器（例如端口8080）。
2. 配置webview的代理地址为localhost:8080。
3. 本地服务器收到请求后，向目标URL发起带授权头的请求，再将响应返回给webview。

这个方案实现复杂度较高，但适配性最强，适合无法修改请求头或URL的场景。

内容的提问来源于stack exchange，提问作者saad khurshid