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? … any help would be appreciated.
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…
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:
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
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
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?
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.
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 :