Module Federation核心库中的CORS问题分析与解决方案

跨域资源共享(CORS)在Module Federation中的表现

在使用Module Federation进行微前端架构开发时，开发者经常会遇到一个典型问题：当尝试通过mf-manifest.json文件加载远程模块时，浏览器控制台会抛出CORS(跨域资源共享)错误。这种错误通常表现为浏览器阻止了对远程资源的请求，因为请求的源与当前页面不在同一个域下。

问题本质分析

这个问题的核心在于现代浏览器的同源策略安全机制。当Module Federation的主应用尝试从不同源的远程应用加载mf-manifest.json文件时，浏览器会先发送一个OPTIONS预检请求来检查服务器是否允许跨域请求。如果服务器没有正确配置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': '*'
  }
}

处理OPTIONS预检请求

某些开发服务器(如webpack-dev-server)默认不处理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;
}

生产环境注意事项

在生产环境中，CORS配置应该更加严格和安全：

1. 避免使用通配符(*)作为允许的源，应该明确指定允许的域名
2. 考虑添加Access-Control-Allow-Credentials头如果需要传递凭证
3. 设置适当的缓存控制头以减少OPTIONS预检请求的频率

最佳实践建议

1. 开发与生产环境分离：开发环境可以使用宽松的CORS策略，但生产环境应该严格限制
2. 安全性考虑：在生产中，应该限制允许的HTTP方法和头
3. 性能优化：对于不变的资源，可以设置较长的预检请求缓存时间
4. 统一配置：建议在项目文档中明确CORS配置要求，确保团队成员一致

通过正确理解和配置CORS，开发者可以充分利用Module Federation的远程模块加载能力，同时确保应用的安全性和稳定性。