Some of my micro frontends are hosted on a different domain that requires authentication so when my SPA tries to access those they get a redirect which then results in a CORS error.
My browser is already authenticated to the external domain and the server CORS are set up to allow cross-origin requests.
Example of my SPA
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test app</title>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js" as="script">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/runtime.min.js"></script>
<meta name="importmap-type" content="systemjs-importmap" />
<script type="systemjs-importmap">
{
"imports": {
"single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js",
"react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.development.js",
"react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.development.js",
"rxjs": "https://cdn.jsdelivr.net/npm/@esm-bundle/rxjs/system/es2015/rxjs.min.js",
"rxjs/operators": "https://cdn.jsdelivr.net/npm/@esm-bundle/rxjs/system/es2015/rxjs-operators.min.js"
}
}
</script>
<!-- Import map URLs are added by WebPack -->
<script id="mfImports" type="systemjs-importmap">
{
"imports": {
"@frontends/mf-local": "/mf-local.js",
"@frontends/mf-external": "https://my-extarnal.doman.com/mf-external.js",
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/import-map-overrides.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/system.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extras/amd.js"></script>
</head>
<body>
</body>
</html>
The import of @frontends/mf-external results in CORS error because of auth redirect. How can I tell single-spa to import the external resource with property XMLHttpRequest.withCredentials=true?