Angular 16模块联邦跨域（CORS）问题求助

核心问题 #

你配置的devServer.headers只在本地开发时的Webpack Dev Server生效，部署到生产环境后完全不起作用——因为生产环境是用Nginx/Apache这类服务器处理请求，和Webpack Dev Server没关系。真正需要配置CORS的是MFE应用的部署服务器，因为是Shell应用（https://front.dev2.group.com/）发起请求去拉取MFE的remoteEntry.js，所以MFE的服务器必须返回允许Shell域名的跨域响应头。

具体解决方案 #

1. 在MFE的生产服务器配置CORS响应头
   以Nginx为例，在MFE的站点配置中添加以下规则（其他服务器如Apache/Node.js服务对应调整）：

   server {
     listen 443 ssl;
     server_name front-mfe.dev2.group.com;
   
     # 针对静态资源（包括remoteEntry.js）添加CORS头
     location / {
       add_header Access-Control-Allow-Origin https://front.dev2.group.com;
       add_header Access-Control-Allow-Methods GET,OPTIONS;
       add_header Access-Control-Allow-Headers Content-Type;
   
       # 处理OPTIONS预检请求，直接返回204
       if ($request_method = OPTIONS) {
         return 204;
       }
   
       # 其他静态资源配置...
       root /path/to/your/mfe/dist;
       try_files $uri $uri/ /index.html;
     }
   }
   

   • 不要用*作为Access-Control-Allow-Origin，因为Module Federation加载模块时可能涉及带凭证的请求，通配符会导致浏览器拦截。
   • 确保OPTIONS预检请求能得到正确响应，否则浏览器会阻止后续的GET请求。

2. 修正MFE的Webpack publicPath配置
   检查MFE应用的Webpack配置，确保publicPath设置正确，比如显式指定MFE的域名：

   output: {
     uniqueName: "mfe1",
     publicPath: "https://front-mfe.dev2.group.com/"
   }
   

   这能保证Shell拉取MFE的模块资源时路径正确，避免额外的跨域问题。

3. 清理Shell应用的无用配置
   你Shell配置里的devServer、cors模块导入都是本地开发用的，部署到生产环境后没用，可以直接删除，避免混淆：

   // 删掉这些：
   const cors = require("cors");
   // ...
   devServer: {
     headers: {
       'Access-Control-Allow-Origin': '*',
       "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
       "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
     }
   },
   

4. 验证CORS配置是否生效
   用curl测试MFE的remoteEntry.js的OPTIONS请求：

   curl -X OPTIONS https://front-mfe.dev2.group.com/remoteEntry.js -H "Origin: https://front.dev2.group.com" -v
   

   查看响应头里是否包含Access-Control-Allow-Origin: https://front.dev2.group.com，且状态码为204或200。

为什么之前的配置没用？ #

• devServer.headers：只作用于本地Webpack Dev Server启动的服务，生产部署后这个服务器根本不会运行，所以配置无效。
• proxy.conf.ts：代理是让本地开发时的请求转发到后端，而这里的问题是Shell跨域请求MFE的静态资源，代理解决不了这个场景。

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