I have integrated callable functions in my firebase api with react on the client. I am using firebase emulators to emulate the callable functions to test locally at localhost:5000. When calling the emulated functions locally they work perfectly, however, when deployed are returning an error.
Here is my client call:
let functions = firebase.app().functions('europe-west2');
if (process.env.NODE_ENV === 'development') {
functions.useFunctionsEmulator(process.env.REACT_APP_FIREBASE_CALLABLE);
}
export const listTrainers = () => async dispatch => {
try {
let listTrainersFunction = functions.httpsCallable('listTrainers');
let request = await listTrainersFunction();
}
}
My REACT_APP_FIREBASE_CALLABLE is set to http://localhost:5001 locally and is not used when deployed.
I have my firebase emulators running which emulate my functions locally at:
functions[listTrainers]: http function initialized (http://localhost:5001/app-name/europe-west2/listTrainers).
This works perfectly and all the data is retrieved as expected. However, when I deploy my functions and try to execute the callable function from my client in production I receive the following errors:
Access to fetch at 'https://europe-west2-app-name.cloudfunctions.net/app-name/europe-west2/listTrainers' from origin 'https://app-name.herokuapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
index.cjs.js:604 POST https://europe-west2-app-name.cloudfunctions.net/app-name/europe-west2/listTrainers net::ERR_FAILED
On my firebase dashboard the functions are listed as follows:
https://europe-west2-app-name.cloudfunctions.net/listTrainers
I can't seem to get the deployed version to call the functions. On the logs the functions are not being called at all.
Any help?
