Enable CORS on OpenMPF docker image

[Isaac Collins]

Good afternoon,

Alex Schimpf and I are working on connecting the OpenMPF API to a React Javascript Application. However, after attempting to send an axios POST request (see: https://www.digitalocean.com/community/tutorials/react-axios-react),  we are met with the following error message:

Access to XMLHttpRequest at 'http://localhost:8080/workflow-manager/user/role-info' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Bascially, this CORS error is telling us that our backend server is not allowing/fulfilling requests from another domain:port. Since our react app(front end) is running on a different domain:port than what OpenMPF workflow manager(back end) is running on, workflow manager is rejecting the request. We need to see if we can enable CORS on the docker image for OpenMPF (back end). Is there an option to do so? Thank you for your time!

Best,

Isaac Collins

[brose...@mitre.org]

Isaac,

We will need to enable CORS in the Workflow Manager for that to work. We will work on getting a new version of the openmpf/openmpf_workflow_manager image up on Dockerhub within the next day or two.

We will need to do some testing, but it looks like we just need to add:

<mvc:cors>

    <mvc:mapping path="/**" />

</mvc:cors>

to applicationContext-web.xml.

-Brian

[Isaac Collins]

Thank you for the update, please keep us updated so we can make the best use of our time. 

Best,

Isaac

[brose...@mitre.org]

Isaac,

We have pushed new Docker images tagged 6.2.5 with the ability to enable CORS. Implementing CORS securely was a little bit more involved than initially anticipated. Simply enabling CORS for all origins is insecure. In order to get CORS to work with your web app, you will need to set the `CORS_ALLOWED_ORIGINS` environment variable on Workflow Manager. It should be set to either the single origin where your web app is running or comma-separated list of origins you would like to enable CORS for. Note that the origin includes the protocol, host, and port (if not using the standard port number). For example, it could be set to: `http://localhost:8000` or `http://localhost:8000, https://example.com`

There is a very basic example of using axios to interact with Workflow Manager is available in the pull request comment here: https://github.com/openmpf/openmpf/pull/1368#issue-690814452

The changes made to Workflow Manager allow you to use CORS with the public REST API. The specific endpoint mentioned in your original message, "http://localhost:8080/workflow-manager/user/role-info", is not part of the public API.  The public API is documented on the Swagger page accessible through Workflow Manager. The public API endpoints all start with `workflow-manager/rest/`. The endpoints in the public API are not dependent on whether or not the account is an administrator, so getting the role information should not be necessary. If you feel that you really need access to an endpoint that is not part of the public API, you can add it to the public API and build your own version of Workflow Manager. We intentionally limit which endpoints are part of our public API because those are the endpoints that we are interested in guaranteeing API stability for. We use semantic versioning to indicate compatibility breaking changes with the public REST API, but there is no such guarantee for the internal REST endpoints.

To add something to the public REST API you will need change the `@RequestMapping(value = "/some/endpoint")` annotation on the desired controller method to `@RequestMapping(value = {"/some/endpoint", "/rest/some/endpoint"})`. For your specific example you would need to change: https://github.com/openmpf/openmpf/blob/34a0f8b2893dfb67b07d7459cee88ba61bb7dd0d/trunk/workflow-manager/src/main/java/org/mitre/mpf/mvc/controller/LoginController.java#L151 . The information for building your own OpenMPF Docker images can be found here: https://github.com/openmpf/openmpf-docker#create-the-openmpf-build-image

[Isaac Collins]

Brian,

Where would we find the environment variables? Also, after re-downloading the OpenMPF GIt repository, the version stayed at 6.2.0 and not 6.2.5, are we doing something wrong? Thanks.

[brose...@mitre.org]

The environment variable should be added to the workflow-manager entry in your docker compose file. For example:

workflow-manager:
  image: ${REGISTRY}openmpf_workflow_manager:${TAG}
  build: workflow_manager

  environment:

    CORS_ALLOWED_ORIGINS: http://some-host:9090
  depends_on:
    - db
    - redis
    - activemq
  ports:
    - "8080:8080"
  volumes:
    - shared_data:/opt/mpf/share
  deploy:
    placement:
      constraints:
        - node.role == manager

To get 6.2.5, you need to change your .env file from

TAG=6.2.0

to

TAG=6.2.5

-Brian

[Alexander Schimpf]

Brian,

After implementing 6.2.5, I tried this code:

I still receive the :  

Access to XMLHttpRequest at 'http://localhost:8080/workflow-manager/rest/info' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My docker-compose.yml workflow manager looks like this:

Am I doing this correctly?

-Alex

[brose...@mitre.org]

Alex,

This is an issue with the call to axios.get(...). It only uses 2 parameters, so `{withCredentials: true}` is being ignored. `{withCredentials: true}` needs to be the second argument, not the third.

-Brian

[Isaac Collins]

Brian,

If you have any time today for a quick 30 minute meeting to take a look at what we are working on, we would greatly appreciate it. We are trying to get something up and running before we end our internships this Friday.

Best,

Isaac