500 error response to CORS preflight OPTIONS when calling cloud function. How can I call a cloud function from my web-app and be CORS compliant?

Question

I'm trying to incorporate cloud functions into my web-app. Unfortunately I'm getting CORS errors that I'm struggling to handle. It seems that pretty much all of the documentation re CORS is using XMLHTTPRequests and some are using the fetch api, but I can't find any info on how to do it with firebase.functions.httpsCallabe()

Client code:

export function bla() {
const callable = firebase.functions().httpsCallable('helloWorld');
    return callable().then(console.log);
}

The entire cloud function (It's in typescript):

import * as functions from 'firebase-functions';

const cors = require('cors')({ origin: true });

export const helloWorld = functions.https.onRequest((request, response) => {
    cors(request, response, () => {
        response.status(200).send("Hello from Firebase!");
    });
});

This is what the chrome console outputs upon triggering my bla() function:

In the Firebase console I'm getting a message that I'm using the standard plan and that I therefore can't access outside sources. Not sure if this is the standard message or an actual problem with my code.

Answer 1

You can't use the Functions client SDK to invoke HTTP type functions. You can only use the Functions client SDK to invoke callable type functions that are declared as you see in the linked documentation.

Callable functions are declared using functions.https.onCall, while HTTP functions are declared using functions.https.onRequest.

If you want to invoke a normal HTTP type function, you should use some HTTP client for that.