Firestore Cross origin request blocked

I'm working on a react js chat app. I want to list the sub collections of document in fire store from front end react. On internet few people said it's not possible to access the list of sub collection through front end. And some how I came to find out the following code which uses the httpsCallable() to access the list of sub collections

const getSubCollections = firebase        .functions()        .httpsCallable("getSubCollections");              getSubCollections({ docPath: "users/JOtnZTNsc1dRUvmohgO7tNCotsk2" })        .then(function (result) {          var collections = result.data.collections;          console.log(collections);        })        .catch(function (error) {          // Getting the Error details.          var code = error.code;          var message = error.message;          var details = error.details;          // ...        });  

When I'm running this it's saying cross origin request blocked. How can I resolve this.

Or else is there any other way to list all the sub collections inside of a document in the firestore using the front end of react js only.

https://stackoverflow.com/questions/67443983/firestore-cross-origin-request-blocked May 08, 2021 at 12:05PM