CODEWITHSUNDEEP
angulartypescriptcorswebpack-module-federationcross-origin-read-blocking
Mat
Mat

Reputation: 711

Angular 16, module federation CORS Problem

I am using angular 16 for 2 angular apps using module federation I have mfe app and shell app. All is working good on localhost but when i deployed apps on two differents domains : https://front-mfe.dev2.group.com/ for mfe and https://front.dev2.group.com/ for shell app I got this error for cors blocked enter image description here

i tried to add devServer on webpack and i added too proxy.conf.ts file but i didn't get solution. Help please. This is webpack for shell app:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;
const cors = require("cors");

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "container",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: "module" },        
        
        // For hosts (please adjust)
        remotes: {
          "mfe1": "https://front-mfe.dev2.group.com/remoteEntry.js"
        },

        shared: share({
          "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
          "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
          "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
          "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

          ...sharedMappings.getDescriptors()
        })
        
    }),
    sharedMappings.getPlugin()
      ],
    };

Upvotes: 0

Views: 966

Answers (1)

heikofritz
heikofritz

Reputation: 131

On localhost normaly there is no cors check. Where did you host the both applications ? You have to set the cors setting from the microfrontend which is called from the shell (host) as allowed from there url. Then it should work. I guess it is done with the config of the webpack, it has to me managed on the hosting side of the IIS or Apache, or.....

Upvotes: 0

Related Questions