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’);

1 Like

Hi there, I’m actually facing this same issue where I cannot get past the CORS errors when trying to call my webhook despite trying the following:

I am using fetch()

  1. logged in anonymously and passed the access token (400 error)
  2. used api key and passed it as a header (CORS error)

any workarounds besides having to use axios?

The way i solved the cors issue atleast temporarily was to pass the content as a query param rather then in the headers. See if you can do that. And remove all headers in your get or post request. You could also pass it into the body as well.

I am using fetch from the browser to call the webhook.

Unfortunately if I try to pass the token in the headers it triggers a cors error despite all efforts to resolve it.

Hope someone here can figure this out.

were you able to pass any authentication tokens/apikeys etc in the params too?

there is nothing that stops you from passing the apikeys or any data for that matter in the params… in my case i psas the active user id. I dont get any cors error here.

just came across this guide by Jake Archibald (google) may help :