如何在微前端（MFE）壳应用中注册多个Service Worker并避免CORS错误

首先要明确一个核心的浏览器安全硬规则：Service Worker的注册必须满足同源要求——这是浏览器为了防止恶意脚本跨源控制页面资源而设置的强制限制。你遇到的SecurityError正是这个规则的直接体现，哪怕你配置了CORS头也没用，因为CORS是针对资源请求的校验，而SW注册的同源检查在请求脚本之前就会执行。

针对微前端的特殊场景，下面是几种可行的解决方案，按推荐优先级排序：

1. 使用反向代理统一所有Service Worker的请求域名（推荐） #

这是最贴合Service Worker安全模型的方案，通过代理将所有MFE的SW请求映射到壳应用的同源路径下，从根源上解决跨源问题。

原理 #

让壳应用的服务器（比如你的localhost:4000）作为反向代理，将特定路径的请求转发到对应的MFE服务器：

• 当壳应用请求/mfe1/service-worker.js时，代理服务器自动转发到http://localhost:3000/service-worker1.js
• 当请求/mfe2/service-worker.js时，转发到http://localhost:3001/service-worker2.js

这样注册SW时就可以使用壳应用的同源URL，完全符合浏览器的安全要求。

实现示例 #

如果你用Node.js + Express作为壳应用服务器

借助http-proxy-middleware配置代理：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

// 代理MFE1的SW请求
app.use('/mfe1/service-worker.js', createProxyMiddleware({
  target: 'http://localhost:3000',
  changeOrigin: true,
  pathRewrite: { '^/mfe1/service-worker.js': '/service-worker1.js' }
}));

// 代理MFE2的SW请求
app.use('/mfe2/service-worker.js', createProxyMiddleware({
  target: 'http://localhost:3001',
  changeOrigin: true,
  pathRewrite: { '^/mfe2/service-worker.js': '/service-worker2.js' }
}));

app.listen(4000, () => console.log('Shell app running on port 4000'));

修改壳应用的SW注册代码

// 现在使用同源URL注册，完全符合安全规则
navigator.serviceWorker.register('/mfe1/service-worker.js', { scope: '/mfe1/' })
  .then(registration => console.log('MFE1 SW registered with scope:', registration.scope))
  .catch(error => console.log('MFE1 SW registration failed:', error));

navigator.serviceWorker.register('/mfe2/service-worker.js', { scope: '/mfe2/' })
  .then(registration => console.log('MFE2 SW registered with scope:', registration.scope))
  .catch(error => console.log('MFE2 SW registration failed:', error));

优点 #

• 完全遵循浏览器安全规范，无额外风险
• 壳应用统一管理SW注册逻辑，MFE无需修改自身代码
• 适配所有MFE部署方式（模块联邦、iframe等）

2. 由每个MFE自行注册自己的Service Worker（适合iframe嵌入的MFE） #

如果你的MFE是通过iframe嵌入壳应用的，那么每个MFE的iframe运行在自己的源下（比如http://localhost:3000），此时MFE可以在自己的iframe内部注册SW，完全满足同源要求。

实现步骤 #

1. 在每个MFE的入口代码中添加SW注册逻辑：

// MFE1的入口代码（运行在http://localhost:3000的页面中）
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker1.js', { scope: '/' })
      .then(reg => console.log('MFE1 SW registered from iframe:', reg.scope))
      .catch(err => console.error('MFE1 SW registration failed:', err));
  });
}

2. 壳应用通过iframe嵌入MFE：

<!-- 壳应用的页面代码 -->
<iframe src="http://localhost:3000" frameborder="0" id="mfe1-iframe"></iframe>
<iframe src="http://localhost:3001" frameborder="0" id="mfe2-iframe"></iframe>

注意事项 #

• 仅适用于iframe嵌入的MFE，如果是通过模块联邦等方式将MFE代码加载到壳应用页面中（共享同一个执行上下文），则MFE的代码运行在壳应用的源下，依然无法跨源注册SW。
• 每个MFE的SW只能控制自己的iframe页面，无法直接操作壳应用的页面资源。

3. 壳应用注册主Service Worker，通过importScripts导入MFE的SW逻辑（备选方案） #

如果上述两种方案都无法实现，你可以让壳应用注册一个同源的主SW，然后在主SW中通过importScripts导入来自MFE的SW脚本（需要MFE的服务器配置正确的CORS头）。

实现步骤 #

1. 壳应用创建主SW脚本/main-sw.js：

// 导入MFE1的SW脚本（需要MFE1服务器设置Access-Control-Allow-Origin: http://localhost:4000）
importScripts('http://localhost:3000/service-worker1.js');
// 导入MFE2的SW脚本（需要MFE2服务器设置Access-Control-Allow-Origin: http://localhost:4000）
importScripts('http://localhost:3001/service-worker2.js');

// 主SW的基础逻辑（可选）
self.addEventListener('install', (event) => {
  console.log('Main SW installed');
});

2. 壳应用注册主SW：

navigator.serviceWorker.register('/main-sw.js', { scope: '/' })
  .then(reg => console.log('Main SW registered:', reg.scope))
  .catch(err => console.error('Main SW registration failed:', err));

3. 配置MFE的服务器添加CORS头：
   • 给MFE1的服务器响应头添加Access-Control-Allow-Origin: http://localhost:4000
   • 给MFE2的服务器响应头添加Access-Control-Allow-Origin: http://localhost:4000

优缺点 #

• 优点：无需修改代理配置，适用于无法配置反向代理的场景。
• 缺点：
  • 导入的MFE SW脚本将在主SW的上下文中运行，可能存在变量冲突或逻辑干扰的风险。
  • 主SW的范围是壳应用的整个域名，需要确保MFE的SW逻辑仅处理自己的资源路径（比如/mfe1/下的资源），避免影响其他MFE或壳应用。
  • 依赖CORS头配置，增加了部署的复杂度。

最后总结：反向代理是最推荐的方案，它既符合安全规则，又能很好地适配微前端的架构。如果是iframe嵌入的MFE，让每个MFE自行注册SW是最简洁的选择。

备注：内容来源于stack exchange，提问作者vaisakh raveendran