Enable fetching manifest JSON from a remote hosted on a different domain

[pganster]

Clear and concise description of the problem

When using the ModuleFederationPlugin, one can configure the remotes like this:

new ModuleFederationPlugin({
  name: 'federation_consumer',
  remotes: {
    federation_provider:
      'federation_provider@http://my-3d-party.com:3000/mf-manifest.json',
  },
}),

But this leads to two problems:

1. We get a CORS error when the mf-manifest.json is being fetched
2. If the 3rd party system is behind an authentication, e.g. token stored in cookie, and the user is already authenticated for this system, the request for the mf-manifest.json is missing the cookies of that domain.

Suggested solution

As far as I can see (please correct me if I'm wrong), the SnapshotHandler.getManifestJson is responsible for fetching that file, see here. The fetch call there could be made configurable so it accepts both the cross-origin mode setting and credentials setting like this:

res = await fetch(manifestUrl, { credentials: 'include', mode: 'cors' });

We'd be willing to provide a pull request to make this change configurable if you agree that this change makes sense and you can point us in directions to start.

Alternatives

A: Build a FederationRuntimePlugin and provide an undocumented fetch hook to supply a custom fetch:

const fetchWithIncludeCredentials = (): FederationRuntimePlugin => ({
  name: 'custom-fetch-plugin',
  fetch(remoteEntry) {
    return fetch(remoteEntry, { credentials: 'include', mode: 'cors' });
  }
});

This actually works, but is undocumented so I don't know if it is a good idea to use.

B: Build a FederationRuntimePlugin and provide a custom loadEntry hook. But I don't think it's possible to just customize the loading part.

C: In older Module Federation versions, it was possible to supply dynamic promise based remotes. In such a Promise, one could fetch the manifest json and configure CORS and credentials themselves. Maybe an API like this would also make sense?

Additional context

A reproduction repository for the CORS error can be found here.

Validations

• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[pganster]

I've updated the issue description to include an alternative A that actually solves our problem. The only issue is that the fetch hook is undocumented at the moment. This comment states for the fetch hook:

only work for manifest , so not open to the public yet

Additionally, the plugin documentation doesn't include this hook. Would it be an option to make the usage of this hook official to solve exactly the use case we have?

[ScriptedAlchemy]

You can now use this hook, we need to update the docs for it.

@pganster if youd like to submit a PR to our docs, it would be greatly appreciated

[pganster]

Alright, will do that as soon as I can, thanks!

[ScriptedAlchemy]

@pganster much love<3

[nwsm]

It seems that the fetch hook is only for mf-manifest.json and remoteEntry.js. How can I add authentication headers for all assets being loaded?

[ScriptedAlchemy]

Create script hook otherwise if it's for the chunks, not remote entry- that would be by looking at the bundlers options for chunk or module loading since federation doesn't handle loading chunks themselves. That's the webpack runtime who does