diff --git a/.changeset/shy-ghosts-worry.md b/.changeset/shy-ghosts-worry.md new file mode 100644 index 00000000000..b1553837565 --- /dev/null +++ b/.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 diff --git a/apps/modernjs/project.json b/apps/modernjs/project.json index 953912b3513..140bf2f4304 100644 --- a/apps/modernjs/project.json +++ b/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 }, { diff --git a/apps/website-new/docs/en/guide/troubleshooting/other.mdx b/apps/website-new/docs/en/guide/troubleshooting/other.mdx index ef230439e9d..d457f55be79 100644 --- a/apps/website-new/docs/en/guide/troubleshooting/other.mdx +++ b/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) \ No newline at end of file +![](@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 `*` \ No newline at end of file diff --git a/apps/website-new/docs/zh/guide/troubleshooting/other.mdx b/apps/website-new/docs/zh/guide/troubleshooting/other.mdx index 0b6c57b3104..1921cc3409e 100644 --- a/apps/website-new/docs/zh/guide/troubleshooting/other.mdx +++ b/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) \ No newline at end of file +![](@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) 值为指定的域名白名单而非 `*` diff --git a/packages/modernjs/src/cli/configPlugin.ts b/packages/modernjs/src/cli/configPlugin.ts index 779b9963b0b..13a97e4ba3d 100644 --- a/packages/modernjs/src/cli/configPlugin.ts +++ b/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: { diff --git a/packages/rsbuild-plugin/src/cli/index.ts b/packages/rsbuild-plugin/src/cli/index.ts index 062f9012bf7..14cce148601 100644 --- a/packages/rsbuild-plugin/src/cli/index.ts +++ b/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. diff --git a/packages/runtime-core/src/plugins/snapshot/SnapshotHandler.ts b/packages/runtime-core/src/plugins/snapshot/SnapshotHandler.ts index 5bcd4d99236..42dfef06fde 100644 --- a/packages/runtime-core/src/plugins/snapshot/SnapshotHandler.ts +++ b/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}`, ),