Calling a cloud function from a firebase web app

Question

I am trying to make use of a cloud function in a firebase web app and am facing some problems. If someone can point out some settings or other things I may be missing that would be helpful.

First here is the relevant code for the cloud function:

exports.myFunc = functions.https.onRequest(function(req, resp) {
  const from = req.body.sender;
  admin.auth().getUserByEmail(from)
      .then(function(userRecord) {
       console.log("Successfully fetched user data:", userRecord.toJSON());
      })
      .catch(function(error) {
        console.log("Error fetching user data:", error);
      });
});

Second here is the code in the web app calling the cloud function:

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://us-central1-myapp.cloudfunctions.net/myFunc", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    from: "example@example.com"
}));
xhr.onload = function() {
    var data = JSON.parse(this.responseText);
    console.log('THE DATA:',data);
};

And finally this is the message I see in the web console after firing the call by hitting a button:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://us-central1-myapp.cloudfunctions.net/myFunc. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 408.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://us-central1-myapp.cloudfunctions.net/myFunc. (Reason: CORS request did not succeed). Status code: (null).

There is nothing relevant in the server logs at this point.

Answer 1

After much time spent I found out that if I write my cloud function this way, it works:

exports.myFunc = functions.https.onRequest(function(req, resp) {
  corsHandler(req, resp, async () => {
    const from = String(req.query.from); // Through the URL.
    admin.auth().getUserByEmail(from)
        .then(function(userRecord) {
          console.log("Successfully fetched user data:", 
                      userRecord.toJSON());
        })
        .catch(function(error) {
          console.log("Error fetching user data:", error);
        });
  });
});