如何实现跨域Flutter Web父应用向iframe子应用传递数据

一、修复iframe跨域传递登录信息的方案 #

你遇到的window.postMessage()失效问题，大概率是Flutter Web端的事件监听方式不对，或者参数配置有误。以下是可落地的实现步骤：

1. 父应用发送登录数据 #

如果父应用是Flutter Web，需要通过dart:js直接调用浏览器的postMessage API，注意必须指定子应用的准确域名作为targetOrigin（禁止用*，避免安全风险）：

import 'dart:js' as js;

// 在父应用登录完成后，向iframe发送数据
void sendLoginDataToIframe() {
  // 获取iframe元素（如果是Flutter Web渲染的iframe，可通过key获取对应的DOM元素）
  final iframeElement = js.context['document']?.callMethod('getElementById', ['child-app-iframe']);
  if (iframeElement != null) {
    final loginData = {
      'token': '用户登录token',
      'userInfo': {'id': 123, 'name': 'xxx'}
    };
    // 发送消息到子应用，第二个参数是子应用的域名
    iframeElement['contentWindow']?.callMethod('postMessage', [loginData, 'https://子应用实际域名.com']);
  }
}

2. 子应用接收并处理登录数据 #

子应用需要通过dart:js注册浏览器的message事件监听器，不能依赖Flutter的MethodChannel（它仅适用于当前窗口内的JS与Flutter通信，跨窗口无效）：

import 'dart:js' as js;
import 'dart:js_util' as js_util;

void main() {
  // 注册message事件监听
  js.context['window']?.callMethod('addEventListener', [
    'message',
    js.allowInterop((dynamic event) {
      final jsEvent = js_util.jsify(event);
      // 验证消息来源，仅处理父应用域名的消息
      final origin = jsEvent['origin'];
      if (origin != 'https://父应用实际域名.com') return;

      // 解析登录数据
      final data = jsEvent['data'];
      final token = data['token'];
      if (token != null) {
        // 跳过登录页，直接设置全局登录状态
        AuthManager.setToken(token);
        // 跳转到子应用首页或直接渲染主页内容
        runApp(const MyHomeApp());
        return;
      }

      // 无有效登录数据时，正常启动登录页
      runApp(const LoginApp());
    })
  ]);
}

二、微前端整合方案 #

如果iframe的方式存在路由、样式隔离等局限，推荐以下两种微前端实现方式：

1. 同域名路由转发（最简方案） #

通过Nginx反向代理，将两个Flutter Web应用映射到同一域名的不同路径下，彻底解决跨域问题，同时通过Cookie共享登录状态：

• 配置Nginx示例：

server {
  listen 80;
  server_name your-main-domain.com;

  # 第一个应用路由
  location /app1/ {
    proxy_pass http://app1-server-ip:port/;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;
  }

  # 第二个应用路由
  location /app2/ {
    proxy_pass http://app2-server-ip:port/;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;
  }
}

• 登录状态共享：在父应用登录成功后，将token写入Cookie，设置domain=your-main-domain.com、path=/，两个子应用可直接读取该Cookie自动完成登录，无需额外传递数据。

2. 基于Module Federation的微前端（灵活方案） #

利用Webpack的Module Federation特性，将两个Flutter Web应用打包为可共享的微模块，由主应用统一加载：

• 配置Flutter Web的webpack构建文件（需启用Flutter的自定义webpack支持），将子应用暴露为可远程加载的模块。
• 主应用作为host，动态加载子应用的模块，并传递全局登录状态。
• 子应用直接使用主应用提供的登录状态，无需单独处理登录逻辑。

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