Default CORS behavior when using manifest vs RemoteEntry.js

[m-arav]

Hi,

Noticed that when using RemoteEntry.js requests are made in no-cors mode

sec-fetch-dest: script
sec-fetch-mode: no-cors
sec-fetch-site: cross-site

but when mf-manifest.json is used the requests are made in cors mode to obtain the resource.

sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site

Is there a way to control this with a user supplied config?

Scenario

Developing on a host locally and the remotes are hosted on a CDN. Some of our remotes are using RemoteEntry.js and the new remotes are using mf-manifest.json. In this case the requests for mf-manifest.json from localhost to the CDN gets blocked because of CORS policy but the requests for RemoteEntry.js goes through. I have less control on setting the CDN response headers (Access-Control-Allow-Origin: *) so was checking to see if there was any way to control this behavior?

[ScriptedAlchemy]

Provide repo

[m-arav]

Okay, I'll setup a example host and setup the sample remotes on some CDN, current repo cannot be shared.

It is a very straightforward setup though. Can be replicated by this config in webpack.config.js

new ModuleFederationPlugin({
      name: 'webpack',
      remotes: {
        nocors: 'remote@https://example.cdn.io/remoteEntry.js',
        cors: 'manifest@https://example.cdn.io/mf-manifest.json',
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
        },
        'react-dom': {
          singleton: true,
        },
      },
    }),

[ScriptedAlchemy]

That's because it's fetch() like an api call. Scripts don't use fetch.

Can you try just fetching it manually in your user code and see if you are able to fetch() the json successfully yourself. Then we would know what to do.
Scripts behave differently than fetch calls

[m-arav]

@ScriptedAlchemy That makes sense. Thank you for explaining this.

Doing a manual fetch fails because the response does not have Access-Control-Allow-Origin set.

[ScriptedAlchemy]

Yes. We cannot fix that on our end. Unless you can make your fetch work by adding some headers, etc.
Otherwise, this is something you need to fix in your infrastructure or create a reverse proxy, etc.

[ScriptedAlchemy]

If you can make it work with custom fetch just inline, like if you just need headers etc. then we have a fetch hook in the runtime plugin to modify the fetch params, but youd have to be able to make fetch work in the first place, so coding it in your app would help you find a solution, then you could apply that to the fetch hook via runtime plugin

[m-arav]

That's good to know, As of now we cannot make it work by adding request headers, I am looking into having the correct headers be added to the response since this will be needed for us in the future.