Development server requests blocked by CORS policy

During testing on a local development server, we encountered issues with the CORS policy on different browser setups.

Some browsers resulted in the following error:

Access to XMLHttpRequest at 'http://localhost:5000/api/projects' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

For example, the development server ran successfully on a newly installed Firefox (version 112.0.2) on MacOS, but not on Chrome or Safari, and not on another version of Firefox.

Note that this error only occurs when the app runs in development mode, because the requests are made between two different ports. However, in production mode, all requests are made within the https://trailtrends.outdoorrd.org/ domain.

One potential fix would be to add the appropriate header to each request made/response received while the app runs in development mode, so that it works regardless of the browser on which we view the app.

I am not sure whether this needs to be implemented within the flask app or the Vue app. Note that within the trails-viz-api/trailsvizapi/__init__.py file (flask app), we already attempt to address the CORS issue.

This is a barrier to allowing many people to run and test new data updates on the development server before a new build is pushed.

OutdoorRD / trails-viz

Development server requests blocked by CORS policy #186