Allow disabling or configuration of CORS in `@nrwl/angular:file-server` executor options

fvoska commented 1 year ago

[x] I'd be willing to implement this feature (contributing guide)

Description

@nrwl/angular:file-server executer that is set up when using Dynamic Module Federation in a Micro-frontends architecture has CORS enabled by default and there is no way to turn it off or to configure it.

This causes CORS error when trying to fetch remoteEntry.mjs file of the MFE child application from the host MFE app in development mode. For example, host app running on localhost:4200 will try to fetch localhost:4201/remoteEntry.mjs and would fail because of CORS issues. Same would happen when fetching any additional chunk files.

For production this is not an issue because then the child app files are served in a different way and CORS is configured on the infrastructure level. However, it is an annoyance during development if all I want to do is nx serve my-host-app.

A workaround that we are using currently is to use devRemotes option when starting the MFE application stack. Doing so avoids using http-server and will use Webpack DevServer that can be configured to disable CORS checks. This workaround has to be done for each child app, in its @nrwl/angular:webpack-dev-server options:

"serve": {
  "executor": "@nrwl/angular:webpack-dev-server",
  "options": {
    "port": 4201,
    "publicHost": "http://localhost:4201",
    "disableHostCheck": true,
    "headers": {
      "Access-Control-Allow-Headers": "*"
    }
  }
}

Motivation

Resolving this issue would make development of applications in MFE architecture easier. Working with MFEs is complex enough as it is, we don't need tooling getting in the way.

Suggested Implementation

When serving child applications, we can see that there is CORS option set, but it is not configurable from Nx. Example output:

Starting up http-server, serving dist/apps/my-child-app

http-server version: 14.1.1

http-server settings: 
CORS: true
Cache: -1 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

My proposal is to make CORS option via @nrwl/angular:file-server executor's options. It could looks something like this:

"serve-static": {
  "executor": "@nrwl/angular:file-server",
  "defaultConfiguration": "development",
  "options": {
    "buildTarget": "decanter-event-report:build",
    "port": 4201,

    // New option
    "cors": {
      "allowedOrigins": [
        "http://localhost:4200"
      ],
    }
  }
}

Alternate Implementations

I see a couple of alternatives:

Simplify the proposed new configuration option to just be disableCors: boolean
- This would reduce the customizability for more generic use-cases, but would be sufficient to resolve the issue
Set CORS option to false by default
- Not customizable and would technically be a breaking change in case someone is reliant on CORS being turned on by default. I do hope that noone is using this executor in production so it would not be relevant even though it is a breaking change.

Coly010 commented 1 year ago

If you are willing @fvoska , you could open a PR to add this and I'll happily take a look.

I'd go for the option of just using a boolean for now, and would simply call it "cors".

Default to true, allowing people to set it to false thereafter in their project.json

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx