Module Federation 开发环境中的 CORS 问题解决方案

问题背景

在使用 Module Federation 进行微前端开发时，开发者经常会遇到跨域资源共享(CORS)问题。特别是在开发环境中，当主应用尝试加载远程模块的 mf-manifest.json 文件时，浏览器会抛出 CORS 错误，导致模块加载失败。

问题分析

CORS 错误通常发生在以下场景：

1. 主应用和远程模块运行在不同的端口或域名下
2. 开发服务器未正确配置 CORS 头部
3. 浏览器对 OPTIONS 预检请求的处理不当

当使用 mf-manifest.json 而不是直接引用 remoteEntry.js 时，这个问题尤为常见，因为浏览器会先尝试获取清单文件，然后根据清单内容加载实际的模块文件。

解决方案

1. 基础 CORS 配置

最简单的解决方案是在开发服务器配置中添加 CORS 头部。对于常见的构建工具，配置方式如下：

Webpack 配置示例:

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
    'Access-Control-Allow-Headers': '*'
  }
}

Rsbuild 配置示例:

server: {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
    'Access-Control-Allow-Headers': '*'
  }
}

2. 处理 OPTIONS 请求

在某些情况下，仅配置 CORS 头部可能不够，特别是当浏览器发送 OPTIONS 预检请求时。这时需要为开发服务器添加专门的中间件来处理这类请求：

setupMiddlewares: (middlewares, devServer) => {
  if (!devServer) return middlewares;
  
  devServer.app.options('*', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*');
    res.setHeader('Access-Control-Allow-Headers', '*');
    res.setHeader('Access-Control-Allow-Credentials', true);
    res.sendStatus(204);
  });

  return middlewares;
}

3. 生产环境注意事项

在生产环境中，CORS 配置应该更加严格，建议：

1. 明确指定允许的源，而不是使用通配符 *
2. 限制允许的 HTTP 方法
3. 明确指定允许的头部
4. 考虑添加 Access-Control-Allow-Credentials 如果需要跨域发送凭据

最佳实践

1. 开发环境：使用宽松的 CORS 策略以方便开发，但确保安全性不受影响
2. 测试环境：模拟生产环境的 CORS 配置，尽早发现潜在问题
3. 生产环境：实施严格的 CORS 策略，只允许必要的跨域访问

总结

Module Federation 开发中的 CORS 问题是一个常见但容易解决的问题。通过正确配置开发服务器的 CORS 头部和适当处理 OPTIONS 请求，可以确保微前端模块在开发环境中顺利加载。记住，生产环境的配置应该更加严格和安全，以保护应用免受潜在的安全威胁。