feat: support env vars to add cors when use serve command (#4005)

Author: zllkjc

.changeset/poor-penguins-build.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/modern-js': patch
+---
+
+feat: support env vars to add cors when use serve command

packages/modernjs/src/server/index.ts

@@ -1,12 +1,14 @@
 import type { ServerPlugin } from '@modern-js/server-runtime';
-import { createStaticMiddleware } from './staticMiddleware';
+import {
+  createCorsMiddleware,
+  createStaticMiddleware,
+} from './staticMiddleware';
 
 const staticServePlugin = (): ServerPlugin => ({
   name: '@modern-js/module-federation/server',
   setup: (api) => {
     api.onPrepare(() => {
       // In development, we don't need to serve the manifest file, bundler dev server will handle it
-      console.log(process.env.NODE_ENV);
       if (process.env.NODE_ENV === 'development') {
         return;
       }
@@ -15,21 +17,30 @@ const staticServePlugin = (): ServerPlugin => ({
       const config = api.getServerConfig();
 
       const assetPrefix = config.output?.assetPrefix || '';
-      if (!config.server?.ssr) {
-        return;
+      // When SSR is enabled, we need to serve the files in `bundle/` directory externally
+      // Modern.js will only serve the files in `static/` directory
+      if (config.server?.ssr) {
+        const context = api.getServerContext();
+        const pwd = context.distDirectory!;
+        const serverStaticMiddleware = createStaticMiddleware({
+          assetPrefix,
+          pwd,
+        });
+        middlewares.push({
+          name: 'module-federation-serve-manifest',
+          handler: serverStaticMiddleware,
+        });
       }
 
-      const context = api.getServerContext();
-      const pwd = context.distDirectory!;
-
-      const serverStaticMiddleware = createStaticMiddleware({
-        assetPrefix,
-        pwd,
-      });
-      middlewares.push({
-        name: 'module-federation-serve-manifest',
-        handler: serverStaticMiddleware,
-      });
+      // When the MODERN_MF_AUTO_CORS environment variable is set, the server will add CORS headers to the response
+      // This environment variable should only be set when running `serve` command in local test.
+      if (process.env.MODERN_MF_AUTO_CORS) {
+        const corsMiddleware = createCorsMiddleware();
+        middlewares.push({
+          name: 'module-federation-cors',
+          handler: corsMiddleware,
+        });
+      }
     });
   },
 });

packages/modernjs/src/server/staticMiddleware.ts

@@ -59,4 +59,20 @@ const createStaticMiddleware = (options: {
   };
 };
 
-export { createStaticMiddleware };
+const createCorsMiddleware = (): MiddlewareHandler => {
+  return async (c, next) => {
+    const pathname = c.req.path;
+    // If the request is only for a static file
+    if (path.extname(pathname)) {
+      c.header('Access-Control-Allow-Origin', '*');
+      c.header(
+        'Access-Control-Allow-Methods',
+        'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+      );
+      c.header('Access-Control-Allow-Headers', '*');
+    }
+    return next();
+  };
+};
+
+export { createStaticMiddleware, createCorsMiddleware };