Firebase callable functions giving me CORS issue - firebase

Question

I've been trying callable functions to avoid handling cors manually but so far nothing is working
i've read similar issue Firebase Callable Function + CORS
the difference is the that dude has 'no access control allow origin' issue. Mine is response to preflight ... issue
I'd like to request for a guidance people. It's frustrating argh..
I'm on Blaze plan
So far i've been trying only to run the functions Locally. i have not deployed the function at all.
this is my function code
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
exports.createOrder = functions.https.onCall((data, context) => {
return new Promise((resolve, reject) => {
resolve(data)
.then(result => {
return result;
})
.catch(err => {
console.error(err.code);
throw new functions.https.HttpsError('unknown', err.message);
});
});
});
this is my client code
export const createOrder = order => {
functions
.httpsCallable('createOrder')({ data: order })
.then(result => {
console.log('result create order is', result);
return result;
});
};
functions package.json
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"serve": "firebase serve --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"dependencies": {
"#sendgrid/mail": "^6.4.0",
"axios": "^0.19.0",
"cors": "^2.8.5",
"firebase": "^6.3.1",
"firebase-admin": "^8.2.0",
"firebase-functions": "^3.1.0",
"firebase-functions-test": "^0.1.6"
},
"engines": {
"node": "8"
},
"private": true
}
firebase config.json
"firebase": {
"apiKey": "AIzaSy*****",
"authDomain": "jokii-test.firebaseapp.com",
"databaseURL": "https://jokii-test.firebaseio.com",
"projectId": "jokii-test",
"storageBucket": "jokii-test.appspot.com",
"messagingSenderId": "104544.....",
"appId": "1:10454485....."
}
Firebase SDK = "firebase": "^6.3.1",

Answer 1

The client SDK doesn't know how to access a function that hasn't been deployed. Notice in the error output that the URL it's trying to access is the one for your fully deployed function. It's currently not possible to have it override the URL to access one you're running locally on localhost.
If you want to invoke your callable function locally, you'll need to implement a client that follows the protocol specification for callable functions. And, as you can see, that's going to be a fair amount of work, because the client SDK is managing a lot of the HTTP protocol work for you.