基于Vite与Module Federation的微前端部署CORS问题求助

问题场景 #

我基于React和Vite构建微前端应用，主应用MainApp通过@originjs/vite-plugin-federation引入部署在Netlify的远程Header模块。本地开发一切正常，但上线后主应用无法加载Header模块，浏览器抛出CORS错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://headerapp.netlify.app/assets/header.js. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

主应用的Vite配置代码如下：

import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import federation from "@originjs/vite-plugin-federation";
export default defineConfig({
 plugins: [
 react(),
 federation({
 name: "MainApp",
 filename: "mainApp.js",
 remotes: {
 header: "https://headerapp.netlify.app/assets/header.js",
 },
 shared: ["react", "react-router-dom"],
 }),
 ],
 build: {
 target: "esnext",
 minify: false,
 cssCodeSplit: false,
 },
 preview: {
 port: 3003,
 },
 resolve: {
 alias: {
 "@": path.resolve(__dirname, "./src"),
 },
 },
});

可行解决方案 #

1. 为远程应用服务器配置CORS规则 #

核心原因是远程Header应用的服务器没有返回允许主应用域名跨域的响应头。以Netlify为例，直接在Header应用根目录创建_headers文件，添加规则：

/*
  Access-Control-Allow-Origin: https://你的主应用域名.com
  Access-Control-Allow-Methods: GET, POST, OPTIONS
  Access-Control-Allow-Headers: Content-Type

• 生产环境建议指定具体主应用域名，避免安全风险；
• 测试环境可临时用Access-Control-Allow-Origin: *允许所有域名访问。

如果是Nginx服务器，可在配置文件中添加CORS响应头：

location /assets/ {
  add_header Access-Control-Allow-Origin https://你的主应用域名.com;
  add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
  add_header Access-Control-Allow-Headers 'Content-Type';
}

2. 修正Module Federation远程模块配置格式 #

检查远程模块的URL格式，确保包含远程应用的federation.name标识：

remotes: {
  header: "header@https://headerapp.netlify.app/assets/header.js",
}

这里的header必须和Header应用的Vite Federation配置中的name字段完全一致。

3. 本地调试的临时CORS规避方案 #

如果本地调试时遇到同类问题，可以通过Vite的代理功能绕开CORS：
在主应用的Vite配置中添加server.proxy：

export default defineConfig({
  // ...其他配置
  server: {
    proxy: {
      "/header-assets": {
        target: "https://headerapp.netlify.app",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/header-assets/, "/assets"),
      },
    },
  },
});

然后修改remotes配置：

remotes: {
  header: "/header-assets/header.js",
}

这样本地请求会通过代理转发，自动处理跨域问题。

内容的提问来源于stack exchange，提问作者shubham-reacts