chore(modern-js-plugin): warn if header origin is not specified (#3654)

Author: 2heal1

.changeset/shy-ghosts-worry.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/modern-js': patch
+---
+
+chore(modern-js-plugin): warn if header origin is not specified

apps/modernjs/project.json

@@ -63,7 +63,7 @@
         "parallel": true,
         "commands": [
           {
-            "command": "lsof -i :8080 || nx run modernjs:serve & echo 'done'",
+            "command": "lsof -i :4001 || nx run modernjs:serve & echo 'done'",
             "forwardAllArgs": false
           },
           {

apps/website-new/docs/en/guide/troubleshooting/other.mdx

@@ -79,4 +79,14 @@ new ModuleFederationPlugin({
 
 * If shared is provided from online host, use [Module Federation DevTools](../basic/chrome-devtool), and click `Enable HMR` button .
 
-![](@public/guide/chrome-devtools/mf-devtool-hmr.jpg)
+![](@public/guide/chrome-devtools/mf-devtool-hmr.jpg)
+
+## CORS warn
+
+When `exposes` is set in the project, it will be regarded as a producer. To ensure that the producer resources can be loaded normally by consumers, `@module-federation/modern-js` and `@module-federation/rsbuild-plugin` will set `Access-Control-Allow-Origin` to `*` and issue a warning at the same time.
+
+#### Solutions
+
+* [Modern.js]: Set [devServer.headers](https://modernjs.dev/configure/app/tools/dev-server.html#headers) value to the specified domain whitelist instead of `*`
+
+* [Rsbuild]: Set [server.cors.origin](https://rsbuild.dev/config/server/cors#origin) value to the specified domain whitelist instead of `*`

apps/website-new/docs/zh/guide/troubleshooting/other.mdx

@@ -53,4 +53,14 @@ Uncaught TypeError: Cannot read properties on null (reading `useState`)
 
 * 若 shared 提供方是线上的 react ，那么需要使用 [Module Federation DevTools](../basic/chrome-devtool)，并点击 `Enable HMR` 按钮
 
-![](@public/guide/chrome-devtools/mf-devtool-hmr.jpg)
+![](@public/guide/chrome-devtools/mf-devtool-hmr.jpg)
+
+## CORS 警告
+
+当项目中设置了 `exposes` ，会被视为生产者，为保证生产者资源能正常被消费者加载，`@module-federation/modern-js`、`@module-federation/rsbuild-plugin` 会设置 `Access-Control-Allow-Origin` 为 `*` ，并同时发出警告。
+
+#### 解决方案
+
+* [Modern.js]: 设置 [devServer.headers](https://modernjs.dev/configure/app/tools/dev-server.html#headers) 值为指定的域名白名单而非 `*`
+
+* [Rsbuild]: 设置 [server.cors.origin](https://rsbuild.dev/config/server/cors#origin) 值为指定的域名白名单而非 `*`

packages/modernjs/src/cli/configPlugin.ts

@@ -4,8 +4,8 @@ import { moduleFederationPlugin, encodeName } from '@module-federation/sdk';
 import { bundle } from '@modern-js/node-bundle-require';
 import { PluginOptions } from '../types';
 import { LOCALHOST, PLUGIN_IDENTIFIER } from '../constant';
-import logger from './logger';
 import { autoDeleteSplitChunkCacheGroups } from '@module-federation/rsbuild-plugin/utils';
+import logger from './logger';
 
 import type { InternalModernPluginOptions } from '../types';
 import type {
@@ -420,15 +420,41 @@ export const moduleFederationConfigPlugin = (
         }
       }
 
+      const devServerConfig = modernjsConfig.tools?.devServer;
+      const corsWarnMsgs = [
+        'View https://module-federation.io/guide/troubleshooting/other.html#cors-warn for more details.',
+      ];
+      if (
+        typeof devServerConfig !== 'object' ||
+        !('headers' in devServerConfig)
+      ) {
+        corsWarnMsgs.unshift(
+          'Detect devServer.headers is empty, mf modern plugin will add default cors header: devServer.headers["Access-Control-Allow-Headers"] = "*". It is recommended to specify an allowlist of trusted origins instead.',
+        );
+      }
+
+      const exposes = userConfig.csrConfig?.exposes;
+      const hasExposes =
+        exposes && Array.isArray(exposes)
+          ? exposes.length
+          : Object.keys(exposes ?? {}).length;
+
+      if (corsWarnMsgs.length > 1 && hasExposes) {
+        logger.warn(corsWarnMsgs.join('\n'));
+      }
+
+      const corsHeaders = hasExposes
+        ? {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods':
+              'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+            'Access-Control-Allow-Headers': '*',
+          }
+        : undefined;
       return {
         tools: {
           devServer: {
-            headers: {
-              'Access-Control-Allow-Origin': '*',
-              'Access-Control-Allow-Methods':
-                'GET, POST, PUT, DELETE, PATCH, OPTIONS',
-              'Access-Control-Allow-Headers': '*',
-            },
+            headers: corsHeaders,
           },
         },
         source: {

packages/rsbuild-plugin/src/cli/index.ts

@@ -182,6 +182,14 @@ export const pluginModuleFederation = (
         // Allow remote modules to be loaded by setting CORS headers
         // This is required for MF to work properly across different origins
         config.server.headers ||= {};
+        if (!config.server.headers['Access-Control-Allow-Origin']) {
+          const corsWarnMsgs = [
+            'Detect devServer.headers is empty, mf modern plugin will add default cors header: devServer.headers["Access-Control-Allow-Headers"] = "*". It is recommended to specify an allowlist of trusted origins instead.',
+            'View https://module-federation.io/guide/troubleshooting/other.html#cors-warn for more details.',
+          ];
+
+          logger.warn(corsWarnMsgs.join('\n'));
+        }
         config.server.headers['Access-Control-Allow-Origin'] ||= '*';
 
         // For remote modules, Rsbuild should send the ws request to the provider's dev server.

packages/runtime-core/src/plugins/snapshot/SnapshotHandler.ts

@@ -326,6 +326,7 @@ export class SnapshotHandler {
               {
                 manifestUrl,
                 moduleName: moduleInfo.name,
+                hostName: this.HostInstance.options.name,
               },
               `${err}`,
             ),