Vite Module Federation CORS error

[farhanmalhi-dbank]

this is my host-app configuration

federation({ name: 'host-app', filename: 'remoteEntry.js', remotes: { remote: 'http://localhost:3002/assets/remoteEntry.js' }, shared: ['react', 'react-dom', '@lin/tools-component-library'] }) and this is my remote app configuration

plugins: [ ..., federation({ name: 'remote', filename: 'remoteEntry.js', exposes: { './Dashboard': './src/pages/dashboard/dashboard' }, shared: ['react', 'react-dom', '@lib/tools-component-library'] }) ], base: 'http://localhost:3002', server: { open: true, port: 3002, cors: true },

i can also see the file in browser at http://localhost:3002/assets/remoteEntry.js.

in my remote app terminal i can see the request but in browser it throws error

1. Access to script at 'http://localhost:3002/assets/remoteEntry.js' from origin 'http://localhost:3001/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2. GET http://localhost:3002/assets/remoteEntry.js net::ERR_FAILED 200 (OK)
3. Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost:3002/assets/remoteEntry.js

   Versions

• vite-plugin-federation: v1.3.5
• vite: v5.1.0

Reproduction

Additional Details

Steps to reproduce

What is Expected?

it should show to remote exported content in the host app

What is actually happening?

Stuck on loading, showing console error

1. Access to script at 'http://localhost:3002/assets/remoteEntry.js' from origin 'http://localhost:3001/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2. GET http://localhost:3002/assets/remoteEntry.js net::ERR_FAILED 200 (OK)
3. Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost:3002/assets/remoteEntry.js

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Title: Vite Module Federation CORS error

[Tushar-Tilwani]

Facing the same issue!

[mhdriyadh367]

is it solved ?

[willy-infinid]

I'm facing a similar issue, but in my case, the problem occurred when I tried to access the remoteEntry.js file from the deployed domain for example: https://example.com/assets/remoteEntry.js. localhost to localhost is just working fine in my case.

[MYKEU]

Funnily enough I still get this error even on localhost:

Access to script at 'http://localhost:3000/_next/static/chunks/remoteEntry.js' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[KarunakarThurlu]

Facing same issue. Any update?

[arunagiritm]

use the below server configuration in vite. Run the app in preview mode to get the remoteEntry file generated for testing in local server:{ port: 5174, cors: { origin: "*", methods: ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"], allowedHeaders: ["X-Requested-With", "content-type", "Authorization"],

},

},

[quinn50311]

same issue, but localhost can run

[Fazliddin-04]

same issue, but running in localhost

[Seifenn]

If the issue is still unresolved, a workaround you can try is testing the remoteEntry.json file using http-server. Here’s how you can do it:

1. Install http-server globally:

   npm install -g http-server

2. Navigate to the folder containing your remoteEntry.json file:

 cd /path/to/your/folder

3. Launch the server with the following command:

http-server --port [PORT_NUMBER] --cors

This will allow you to access your file without running into CORS blocking issues. Just replace [PORT_NUMBER] with your desired port number. Let me know if this workaorund worked for you.

[JonghunBok]

You can use relative address for remote assets and utilize the vite dev server as a proxy. I started using this pattern recently, which seems to resolve this CORS issue and serve me well with multiple remote providers.

The CORS issue can be resolved by introducing a kind of proxy server, which is shown by @Seifenn 's solution that involves http-server. As the remote assets are served via the same url from browser's perspective (localhost), CORS error goes away.

And this pattern makes sense when you think of the remote hosting URLs a part of configuration, as you can change the target url just by editing .env file or changing the injected environment variable value on hosting machine.

So, in host you add .server.proxy config like below, and build the remote providers with appropriate base in build options.

    plugins: [
      vue(),
      federation({
        name: 'host',
        remotes: {
          'your-remote-provider': '/your-remote-provider/assets/remoteEntry.js',
          'your-second-remote-provider': '/your-second-remote-provider/assets/remoteEntry.js',
        },
      }),
    ],
    server: {
      proxy: {
        '^/your-remote-provider/assets': {
          target: process.env.YOUR_REMOTE_PROVIDER, // choose your way of using environment variables.
          secure: false,
          changeOrigin: true,
        },
        '^/your-second-remote-provider/assets': {
          target: process.env.YOUR_SECOND_REMOTE_PROVIDER,
          secure: false,
          changeOrigin: true,
        },
      },
    },
  };
});

[Fazliddin-04]

same issue, but running in localhost

On my case, the error has solved by DevOps side.

My remote microfrontend was a separate repository. inside .helm/values.yml file, just added these lines:

...

ingress:

  enabled: true                                                                                                                                                                                                                       

  rules:                                                                                                                                                                                                                                                                                                                                                                                                                                            

    - annotations:                                      
        nginx.ingress.kubernetes.io/enable-cors: "true"
        nginx.ingress.kubernetes.io/cors-allow-origin: "*"
        nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS, DELETE"

...