Development server requests blocked by CORS policy

[jblehr]

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.

[jblehr]

Update on 5/13/2024: this appears to now be working on Chrome version Version 124.0.6367.158 (Official Build) (x86_64).

Update on 9/4/2024: No longer working on Chrome version Version 128.0.6613.114 (Official Build) (x86_64), but still working on Firefox.

Update on 12/18/204: Still not working on Chrome version Version 131.0.6778.140 (Official Build) (x86_64), still working on Firefox.

[EmiliaH]

Hey @jblehr, what kind of priority would you assigned to this bug? Do you think it's worth spending time on as we develop for MBS?

[jblehr]

Low. As I noted, it's still working on Firefox (and whatever browser @davidye007 has been using).