Mongo Data API and CORS

MongoDB Atlas App Services & Realm Atlas Data API
1

Hello, I’m trying to query my Mongo DB on Atlas through the Data API, from the browser (with an Angular app) but I’m blocked by CORS.
I guess it’s by design and the Data API is supposed to be consumed from server apps, not client apps, as the UI in the admin dashboard doesn’t show anything that makes me think I can configure CORS, but just in case there’s a way around this I’d be glad to hear it.

2 Likes
2

Hey Andrea - you’re correct, currently it’s blocked by CORS because we don’t yet offer additional authentication and authorization options. Feel free to request it on Atlas: Top (1026 ideas) – MongoDB Feedback Engine and choose the ‘Data API’ category so we can gauge interest.

Other ways to get around this is to wrap it in a backend or another managed service like Lambda or put an API gateway in front of it.

1 Like
4

Hi folks,

For anyone who has a similar use case where CORS or a browser-only application environment currently prevents using the Data API (Preview), please watch/upvote the feature request to Support CORS from the Data API (MongoDB Feedback Engine).

This feature request is currently under review, so any additional context on desired use case support would be helpful – start a new forum discussion using the data-api tag.

In the interim, some alternative approaches to consider include:

  • Putting an API gateway or serverless function in front of the Data API calls (as mentioned earlier in this topic).

  • Using the MongoDB Realm GraphQL API:

  • Using the Realm Web SDK.

Regards,
Stennie

2 Likes
5

Hi –

Just wanted to hop on here to update this thread and announce that we now support client side access for the Data API using Bearer Authentication. This will allow you to get around CORS errors and call the Data API from any platform that supports HTTPS, which includes web browsers. Check out our docs page that goes over how to authenticate Data API requests for web browser access.

If you would like to share any additional context on your use case or general feedback regarding this feature, please feel free to email me at kaylee.won@mongodb.com.

2 Likes
6

I’am still having trouble using Data API from browser application (angular). Either I have a CORS error, either I have an unauthorized error.

With the code below I have an error : “value of ‘kid’ has invalid format”

test(){
    const body = {
      "dataSource": "cluster-test",
      "database": "sample_mflix",
      "collection": "movies",
      "filter": {}
    }

    const options = {
      headers:{
        'Accept': 'application/json', 
        'Authorization': 'Bearer abcdexxxxxxxx'
      }
    }

    this.data$ = this.http.post(`${this._url}/findOne`,body,options)
  }

Searching on the community forum to find a solution to this “kid” problem, I tried using the header :

'jwtTokenString': 'abcdexxxxxxxx'

And then I have the CORS error instead.

Need help!

Thank you

7

To be honest i don’t get it.

As a developer, when i want to use Data API directly from browser, custom JWT authentication makes the most sense of it. If i choose Data API i want to avoid App Service User Session management abstraction, because probably i had already implemented one using other tools (e.g. Auth0) :slight_smile:

If I didn’t have it (session management) i will probably choose Realm Web SDK instead of Data API. So jwtTokenString in Data API, without CORS is useless.