Flutter应用如何监听并处理来自服务端的POST请求

首先明确核心前提：Flutter Web 属于浏览器端客户端应用，本身没有公网可访问的服务端口，无法直接接收第三方服务端主动发起的入站 POST 请求，你遇到的场景对应两种不同的实现路径： #

场景1：对接 Twitch OAuth 授权回调 #

如果你的 POST 回调是授权流程的响应，可按以下步骤实现：

• 首先将 Twitch 回调地址配置为你的 Flutter Web 应用的可访问路径（比如 https://你的域名/twitch_callback）
• 在 Flutter Web 的路由表中注册对应回调路径的路由处理页
• 在回调路由页的 initState 生命周期中，通过 dart:html 库获取当前页面的请求参数：
  如果你需要获取 POST 提交的表单数据，可通过以下代码实现：

  import 'dart:html' as html;
  
  // 在initState中调用该方法
  void getCallbackParams() {
    // 处理锚点参数（Twitch隐式授权流常用传参方式）
    if (html.window.location.hash.isNotEmpty) {
      final params = Uri.splitQueryString(html.window.location.hash.substring(1));
      final accessToken = params['access_token'];
      // 后续业务逻辑处理
    }
    // 处理POST表单提交到当前页面的场景
    final form = html.document.querySelector('form') as html.FormElement?;
    if (form != null) {
      final formData = form.data;
      // 提取表单字段做后续处理
    }
  }
  

• 拿到回调参数后，即可在 Flutter 侧完成后续的授权校验、接口请求逻辑

场景2：对接 Twitch EventSub 等服务端 Webhook 推送 #

如果是 Twitch 服务端主动推送事件的 POST 回调，必须通过后端服务中转，实现步骤如下：

• 自行部署一个后端服务（Node.js/Java/Python 均可），提供公网可访问的回调地址，将该地址配置为 Twitch 的回调地址
• 后端服务接收到 Twitch 的 POST 请求后，可通过两种方式同步给 Flutter Web 端：
  • 方案一：后端将回调事件存储后，Flutter Web 端通过轮询接口主动拉取事件数据
  • 方案二：Flutter Web 端和后端建立 WebSocket 长连接，后端接收到 Twitch 回调后，通过 WebSocket 主动推送事件给 Flutter 端

注意：不要尝试在 Flutter Web 端直接监听端口接收请求，浏览器的安全沙箱机制不允许网页监听本地端口接收公网请求，该方案完全不可行。

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