微前端开发跨越处理

微前端本地开发 Access to fetch at http://localhost:9527/ from origin http://localhost:8000 has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. If an opaque response serves your needs, set the requests mode to no-cors to fetch the resource with CORS disabled.这个错误是微前端开发中非常典型的问题。它表明你的主应用运行在http://localhost:8000在尝试加载微应用运行在http://localhost:9527时被浏览器的跨域资源共享CORS策略阻止了。微前端框架如 qiankun在加载微应用时会通过fetch请求获取其入口文件如index.html和js文件这个过程同样受到浏览器同源策略的限制。在本地开发环境中解决这个问题的核心思路是让微应用子应用允许主应用的跨域访问。 核心解决方案配置微应用支持跨域你需要修改运行在http://localhost:9527的微应用的开发服务器配置为其响应添加 CORS 相关的 HTTP 头。如果你使用 Vite 开发微应用在你的微应用项目的vite.config.js文件中配置server.headers1// vite.config.js 2import { defineConfig } from vite 3 4export default defineConfig({ 5 // ... 其他配置 6 server: { 7 headers: { 8 Access-Control-Allow-Origin: *, // 允许所有来源开发环境方便 9 Access-Control-Allow-Methods: GET, POST, OPTIONS, 10 Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization, 11 }, 12 }, 13})如果你使用 Vue CLI 开发微应用在你的微应用项目的vue.config.js文件中配置devServer.headers// vue.config.js module.exports { devServer: { headers: { Access-Control-Allow-Origin: *, Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS, // 在这里加上 pragma Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,pragma, }, } }如果你使用 Create React App 开发微应用在项目根目录创建一个src/setupProxy.js文件需要安装http-proxy-middleware包1// src/setupProxy.js 2const { createProxyMiddleware } require(http-proxy-middleware); 3 4module.exports function(app) { 5 app.use((req, res, next) { 6 res.header(Access-Control-Allow-Origin, *); 7 res.header(Access-Control-Allow-Methods, GET, POST, OPTIONS); 8 res.header(Access-Control-Allow-Headers, DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization); 9 if (req.method OPTIONS) { 10 return res.sendStatus(204); 11 } 12 next(); 13 }); 14}; 补充说明Nginx 配置在模拟生产环境或进行微应用集成时也常通过 Nginx 来配置跨域。这与你之前遇到的通用跨域问题解决方案一致。1location / { 2 # ... 其他 Nginx 配置 3 add_header Access-Control-Allow-Origin *; 4 add_header Access-Control-Allow-Methods GET, POST, OPTIONS; 5 add_header Access-Control-Allow-Headers DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization; 6}✅ 总结表格场景解决方案配置位置微应用本地开发配置开发服务器的响应头微应用项目的vite.config.js/vue.config.js等模拟生产/集成测试配置 Nginx 反向代理的响应头微应用的 Nginx 配置文件给你的建议立即检查并修改你的微应用http://localhost:9527的开发服务器配置添加 CORS 响应头。这是解决微前端本地开发跨域问题的标准做法。需要重启服务吗是的需要重启服务。修改完微应用的配置文件如vite.config.js或vue.config.js后必须重启你的微应用开发服务器即运行在http://localhost:9527的那个服务新的跨域配置才会生效。 如何重启通常在终端中按Ctrl C停止当前服务然后重新运行启动命令即可。Vite 项目:npm run devVue CLI 项目:npm run serve其他: 使用你项目中对应的启动命令重启后请刷新主应用的页面跨域问题应该就解决了。