MongoDB Realm Webhooks - CORS support?

Hello all!

We have built an iOS realm app that synchronises data with MongoDB atlas. In order to give a web-app access to our data on atlas, we thought it would be a good idea to build a few webhooks so the web-app can simply do RESTful requests to read some data.

We have set up webhooks (http GET and POST) and corresponding functions. When we test the webhooks via Postman this all works perfectly - we are able to get json data from and post json data to atlas. However when our web-app does e.g. call our webhooks with an ajax request, we run into problems with CORS like so:

“Access … blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource”

I have checked how to configure CORS on webhooks, but cant find anything suitable. So in order to call a “GET getData” webhook, Google Chrome does a preflight OPTIONS request to the getData webhook. The problem seems to be that the preflight OPTIONS request does not find a corresponding webhook as you cant configure such a http method for webhooks (the preflight request ends up returning a 404 error)

Am I missing anything obvious? Does anyone have any experience with connecting a web-app to a webhook? :frowning: … any help would be appreciated.

Kind regards,
Steve

Hi @S_Wayne,

Welcome to MongoDB Community.

Your web app should be able to call the webhook using an http call, you might need to provide security headers depnading on how your auth is set on the webhook side.

I am not sure why you use ajax call to call this URL, try to use a package like axios for this or other HTTP rest call…

Thanks
Pavel

Thank you for your response Pavel!

The web app is hosted on an external domain and submits it’s http calls from that external domain. As a result chrome blocks calls to the mongodb webhook hosted on our atlas server due to CORS. Usually you get this working by adding Access-Control-Allow-Origin headers on the server hosting the respective webhook. However I haven’t found a way of making this work on a mongodb realm webhook. We have tried adding he following to our GET webhook code:

response.setHeader(“Access-Control-Allow-Origin”, “*”);
response.setHeader(“Access-Control-Allow-Methods”, “GET,HEAD,OPTIONS,POST,PUT,DELETE”);
response.setHeader(“Access-Control-Allow-Headers”, “Origin, X-Requested-With, Content-Type, Accept, Authorization”);

… but no success.

Cheers,
Steve

@S_Wayne,

As a result chrome blocks calls to the mongodb webhook hosted on our atlas server due to CORS

Are your running the webhook in your browser?

Please look at the following discussion:

Best regards,
Pavel

Yes, the web-app runs in the browser - and the browser submits the call to our webhook. I shall have a look at that discussion, thank you!

Hello - just in case anyone else runs into this issue. It was impossible for me to use a webhook from a web-app running in a browser.

We have now changed our approach as follows:

  • the webhooks seem to be an option only for machine to machine communication (definitely not through a browser)
  • we have written realm functions that a dedicated logged in user can execute. With the web-sdk these functions can be used like any other javascript function
  • we now use the Web-SDK (https://docs.mongodb.com/realm/web/quickstart/) to do the following

a) authenticate a user (we are using api key authentication)
b) using that user, we execute the corresponding function to read / submit data to our mongodb

Works a treat.

Hi @S_Wayne,

Thanks for the update.

I am not certain why you could not execute a package like axios and access webhooks , see the following video tutorial for example:

This is a frontend calling webhooks and it works just fine, it just does not use ajax calls…

Thanks
Pavel

i think the issue is the youtube video is using axios, vs this question is using fetch, fetch and axios trigger cors differently i belive… also i wonder if in realm functions can we set cors as follows and why not?

res.header(‘Access-Control-Allow-Origin’, “*”);
res.header(‘Access-Control-Allow-Methods’, ‘GET,PUT,POST,DELETE’);
res.header(‘Access-Control-Allow-Headers’, ‘Content-Type’);