Firebase Cloud Functions - onCall not working

Question

I'm testing a very simple implementation as described on FB docs (https://firebase.google.com/docs/functions/callable), and it's not working.

Here's my Firebase Function, deployed to cloud:

exports.getRecSkills = functions.https.onCall((data, context) => {
  return {text: data.text};
});

...and my client call (after initializing FB):

var getRecSkills = firebase.functions().httpsCallable('getRecSkills');

getRecSkills({text: '123'}).then(function(result) {
  console.log(result);
}).catch(function(error) {
  console.log(error.code);
  console.log(error.message);
});

I get a CORS header related issue but in the docs, it doesn't mention the need for CORS... am I missing something?

Some notes:

• I've been able to execute other Firebase Functions (i.e. HTTPS, Database) so I don't think it's me setting up Firebase wrong.
• Updated to latest Firebase, so don't think that's an issue either.
• Gives me an "internal" error, which the API docs aren't helpful, other than "something is seriously wrong".
• I can't seem to get the function to work (it keeps giving me 400-errors) when testing locally via the shell, even though I got it to work with any other database and https functions

Been struggling with this for quite some time... Please help!

Answer 1

To get rid of your CORS error, make sure your firebase.json has the following headers:

"hosting": [
    {
      "headers": [
        {
          "source": "**",
          "headers": [
            {
              "key": "Access-Control-Allow-Origin",
              "value": "*"
            }
          ]
        }
      ]
   }
]

If you're running on Firebase Emulator on local device, make sure you have the following after initializing your Firebase Functions, otherwise your local device will still be calling the remote the Firebase Function and you'll hit the CORS error again:

if (window.location.hostname === "localhost") {
    console.log("localhost detected!");
    firebase.functions().useFunctionsEmulator('http://localhost:5001');
};

Answer 2

I had the same problem just recently but solved it after including my "projectId" in my config object. Below is a code snippet of the Firebase config object for Javascript. Make sure all fields have been filled in your config object and it should solve your undefined issue.

     var config = {
     apiKey: "<API_KEY>",
     authDomain: "<PROJECT_ID>.firebaseapp.com",
     databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
     projectId: "<PROJECT_ID>",
     storageBucket: "<BUCKET>.appspot.com",
     messagingSenderId: "<SENDER_ID>",
     };