angularcorsangular-module-federation

NX module federation with angular throws blocked by CORS policy when configuration is production

So, I created an example site for module-federation with NX, it has a HOST page and 6 REMOTE pages, it is not using backend for the time being. All good working ok when running in NG SERVE mode, but now I tried to test this by deploying the apps into my LOCAL IIS and I get several CORS errors.

I believe I configured IIS properly, by adding the apps (one by one host and remotes) and also configuring the security to allow IIS user, after that, when I try to navigate I get this error:

enter image description here

Googling around, I found that I might need to configure the file module-federation.config.js to include headers, this is what I did, first in host only, then I added the same to all the remote apps.

  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"
  }

But the error still persists, so the question, how to properly configure an NX Module federation site with HOST and REMOTES, to avoid the CORS exception?

Thanks.

Solution

  • Solved this issue after understanding a bit more about IIS.

    There is a section in IIS where you can specify the headers at server level, just added the "Access-Control-Allow-Origin": "*" and it started to work.