Flutter中如何通过POST请求在浏览器打开URL并隐藏参数？

原代码用url_launcher发起的是GET请求，参数会直接暴露在地址栏。要实现POST请求且参数不显示，可采用以下两种方案：

方案一：用WebView在APP内发起POST请求 #

如果允许在APP内部打开目标页面，推荐使用webview_flutter包，它能加载自动提交的POST表单，参数不会暴露。

实现步骤： #

1. 添加依赖到pubspec.yaml：

dependencies:
  webview_flutter: ^4.4.0

2. 代码实现：

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

class PostWebView extends StatefulWidget {
  final String targetUrl;
  final Map<String, String> postParams;

  const PostWebView({super.key, required this.targetUrl, required this.postParams});

  @override
  State<PostWebView> createState() => _PostWebViewState();
}

class _PostWebViewState extends State<PostWebView> {
  late WebViewController _webController;

  @override
  void initState() {
    super.initState();
    _webController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadHtmlString(_buildAutoSubmitForm());
  }

  String _buildAutoSubmitForm() {
    // 构建隐藏的表单字段
    final fields = widget.postParams.entries.map((entry) {
      // 转义特殊字符避免HTML注入
      final escapedKey = entry.key.replaceAll('"', '&quot;');
      final escapedValue = entry.value.replaceAll('"', '&quot;');
      return '<input type="hidden" name="$escapedKey" value="$escapedValue">';
    }).join('\n');

    // 生成自动提交的HTML表单
    return '''
      <html>
        <body onload="document.forms[0].submit()">
          <form action="${widget.targetUrl}" method="post">
            $fields
          </form>
        </body>
      </html>
    ''';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('加载中')),
      body: WebViewWidget(controller: _webController),
    );
  }
}

// 使用示例
void openPostPage() {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => PostWebView(
        targetUrl: 'https://example.com/api/show_content',
        postParams: {
          'id': '85',
          'token': user_token,
        },
      ),
    ),
  );
}

方案二：生成本地HTML文件，用外部浏览器自动提交POST #

如果必须打开外部浏览器，可生成临时HTML文件，内含自动提交的POST表单，再用url_launcher打开该文件。

实现步骤： #

1. 添加依赖到pubspec.yaml：

dependencies:
  url_launcher: ^6.2.2
  path_provider: ^2.1.1

2. 代码实现：

import 'dart:io';
import 'package:url_launcher/url_launcher.dart';
import 'package:path_provider/path_provider.dart';

Future<void> launchWithPost(String targetUrl, Map<String, String> postParams) async {
  // 构建表单字段并转义特殊字符
  final fields = postParams.entries.map((entry) {
    final escapedKey = entry.key.replaceAll('"', '&quot;');
    final escapedValue = entry.value.replaceAll('"', '&quot;');
    return '<input type="hidden" name="$escapedKey" value="$escapedValue">';
  }).join('\n');

  // 生成HTML内容
  final htmlContent = '''
    <html>
      <body onload="document.forms[0].submit()">
        <form action="$targetUrl" method="post">
          $fields
        </form>
      </body>
    </html>
  ''';

  // 创建临时HTML文件
  final tempDir = await getTemporaryDirectory();
  final htmlFile = File('${tempDir.path}/post_submit.html');
  await htmlFile.writeAsString(htmlContent);

  // 打开本地文件
  final fileUri = Uri.file(htmlFile.path);
  if (await canLaunchUrl(fileUri)) {
    await launchUrl(fileUri, mode: LaunchMode.externalApplication);
  } else {
    throw '无法打开本地表单文件';
  }
}

// 使用示例
void main() async {
  await launchWithPost(
    'https://example.com/api/show_content',
    {
      'id': '85',
      'token': user_token,
    },
  );
}

注意事项： #

• 两种方案都要对参数值做HTML转义，避免注入风险。
• 方案二中，部分浏览器可能限制本地文件跨域提交，需后端配置CORS允许对应来源。

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