CORS Issues with Garfish and Microfrontend in Production Mode

[rogerlpl]

Hi,

I am experiencing issues with microfrontend sub-apps when deploying in production mode using modern deploy. The sub-apps throw a CORS error when trying to load in the main app. Below are the details of the error and my current configuration.

Observed Error:

modern.config.js SubApp Configuration:

import { appTools, defineConfig } from '@modern-js/app-tools';
import garfishPluginDefault from '@modern-js/plugin-garfish';
import pluginBff from '@modern-js/plugin-bff';
import expressPluginDefault from '@modern-js/plugin-express';

const path = require('path');

export default defineConfig({
  runtime: {
    router: true,
  },
  deploy: {
    microFrontend: true,
  },
  dev: {
    assetPrefix: process.env.DEV_ASSET_PREFIX,
  },
  bff: {
    prefix: process.env.BFF_PREFIX,
  },
  server: {
    port: process.env.SERVER_PORT,
  },
  tools: {
    webpack: (config, { mergeConfig }) => {
      return mergeConfig(config, {
        resolve: {
          alias: {
            react: path.resolve('./node_modules/react'),
            'react-dom': path.resolve('./node_modules/react-dom'),
          },
        },
      });
    },
  },
  plugins: [
    appTools({
      bundler: 'webpack', 
    }),
    garfishPluginDefault(),
    pluginBff(),
    expressPluginDefault(),
  ],
});

Everything works fine when I use a CORS extension. However, I have not been able to find an effective way to configure CORS for production mode in the main app. I would appreciate any guidance on how to properly configure the CORS headers to resolve this issue.

If you need more details or additional examples, please let me know.

Thank you in advance for your help.

[kirillbashtenko]

Bump