angular-architects / module-federation-plugin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cors remoteEntry different domain

carlosmarind opened this issue · comments

commented

hi.

I have one shell, and two microfronts behind, but this two are on different domains. when a load the remote entry ( loadManifest or setManifest) and the library load the remote entry, the http request throws an error because CORS. this http call its triggered internally by loadManifest or setManifest, so i cannot control the headers. The server its not a problem, because the call dont event reach it, the browser blocks the call before.

fetch('/assets/manifest/manifest.json?_v=' + Date.now(),{ headers: {"Access-Control-Allow-Origin": "*"} }) // Fetch the manifest avoiding cache
.then((res) => res.json())
.then((definitions) => setManifest(definitions)) // Load the manifest and set it in the module federation , this its where cors error happens
.then(() => import('./bootstrap').catch((err) => console.error(err)));

manifest.json

{
"mf1": "https://mf1-dev.mydomain-it.com/remoteEntry.js",
"mf2": "https://mf2-dev.mydomain-it.com/remoteEntry.js"
}

shell lives in https://shell-dev.mydomain-it.com/remoteEntry.js

You really need to tell the respective server to provide the headers. If the server side is never called, already the CORS preflight might fail.