Javascipt Web XMLHttpRequest Blocked by corspolicy

I have checked multiple topics. I can’t send requests to the data-api. I used the same exact headers, etc in postman and it works. it just keeps giving the following error when run using my website:

Access to XMLHttpRequest at 'https://data.mongodb-api.com/app/data-ssocc/endpoint/data/beta/action/insertOne' from origin 'https://pritje.nl' has been 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.

My js code run in a browser enviorment:

  var data3 = {
      dataSource: 'Cluster0',
      collection: 'Number',
      database: 'Pritje',
      document: {
        name: 'John Sample',
        age: 42,
      },
    };
    var d = JSON.stringify(data3);
    const oReq = new XMLHttpRequest();
    oReq.addEventListener('load', reqListener);
    oReq.open(
      'POST',
      'https://data.mongodb-api.com/app/<data api app id>/endpoint/data/beta/action/insertOne'
    );
    oReq.setRequestHeader('Access-Control-Allow-Origin', '*');
    oReq.setRequestHeader('content-type', 'application/json');
    oReq.setRequestHeader(
      'api-key',
      '<api key>'
    );
    oReq.send(d);

The CORS policy will apply when you’re using the API from a browser, which is not recommended for the API as it exists currently. You can disable CORS but that is not recommended because it typically means the API key storage is insecure. I suggest putting an API gateway/edge or serverless functions in front of the client app

1 Like

This makes the Data API barely worth bothering with, and incentivizes our team to just migrate to AWS for everything.

HI @Jason_Steele - can you explain how you were planning on using it in your use-case? LIke I said, given the product is in beta, this is not available at the moment but we are actively considering adding support. If you need an API from MongoDB Atlas right now that is not blocked by CORS, I suggest using the GraphQL API that is offered by MongoDB Realm. The Steps to generate this API involve -

  1. Generating your JSON Schema
  2. Configuring Authentication
1 Like

@Sumedha_Mehta1 Quick question how would I go for accessing mongodb in a browser or should I just quit mongodb

1 Like

If I can call the data api from the server, why shouldn’t I be able to call it from the client?

1 Like

@Dark_Ville_2 -

2 ways -

2 Likes

Welcome to the MongoDB Community Forums @Jason_Steele!

The Data API is still in beta and does not currently support additional authentication and authorisation options that would enable you to securely use a Data API key with CORS in a client-only application context.

Initial Data API support has been optimised for use in server environments, but allowing browser usage with CORS is currently being considered per Please Support CORS from the Data API.

As mentioned in this forum discussion, there are alternative approaches to consider including Realm GraphQL and Realm Web SDK. @Sumedha_Mehta1 is a Product Manager for MongoDB Realm and the Data API, so any constructive feedback on your product experience or details you can share about your use case would be helpful.

Thanks,
Stennie

1 Like

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.