Central API blocked by CORS policy

Development
1

I am trying to connect to the ODK central using Reatjs and here's the error message I get. What do i do to correct this?

Access to fetch at 'https://example.com/v1/sessions' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

2

Hi @Saviour_Dela! If your React app is at the same origin as Central, then you shouldn't have issues with CORS. The Central frontend uses the Central API and is able to do so because it's at the same origin.

We've heard in the past that it could be useful to permit CORS requests in some cases: see https://github.com/getodk/central/issues/68. The main case that we've considered is OData. It's less likely that we'd want to permit CORS requests for a POST request to /v1/sessions.

3

Thanks very much, @Matthew_White. The React app is on a different server. How do I allow CORS on my central server to allow the react app to connect to it then?

Thanks.

4

Central doesn't currently support CORS, though we may change that in the future. Enabling CORS has security ramifications, so we would need to think through those carefully. In the meantime, you could have your other server send requests to Central.

If you're able to tell us more, it'd be helpful to hear more details about your use case. What sorts of things is your React app doing? What requests are being sent to Central?

5

Thanks very much for your response.
In my use case, the React app is supposed to connect to the ODK Central to fetch submitted data from central into the application.

The data will then be used in the React application to do some other things which cannot currently be done in the odk central.

I hope this explains it.

1 Like
6

Hi Everyone,

So I am having same case as @Saviour_Dela...
Can we change nginx config file to accept CORS or that change doesn't matter?

7

Option 1: Relay API

One way around this issue could be to write a small wrapper backend API around the endpoints you need in Central.

For example:

  • React app calls your Python API /list-projects.
  • Python API either uses pyodk or simple requests call to Central API.
  • Response returned to frontend.

This obviously isn't as efficient as connecting directly to Central, but it is one way to get around the CORS issue.

Option 2: Reverse Proxy

Set up an Nginx server to reverse proxy to your frontend and to the Central backend, both via the same domain.

The frontend route would be /, while the route for Central could be /api.

As far as your web browser is concerned, both are then on the same domain, so no CORS issues.

There are other options too!
You mentioned the Nginx config bundled with Central.
You could update that config to reverse proxy to your custom frontend, instead of the default frontend.

2 Likes