flutter web calling firebase functions getting internal error

Question

When I call an httpscallable firebase functions I always get:

Error: [firebase_functions/internal] internal
    at Object.throw_ [as throw] (http://localhost:33285/dart_sdk.js:5075:11)
at https_callable_web.HttpsCallableWeb.new.call (http://localhost:33285/packages/cloud_functions_web/https_callable_web.dart.lib.js:45:23)

This is the code of the callable:

 HttpsCallable callable = FirebaseFunctions.instanceFor(region: 'us-central1').httpsCallable('listFruit');
 final results = await callable();
 List fruit = results.data;

Node.js code:

exports.listFruit = functions.https.onCall((data, context) => {
  cors(data, context, () => {
    return ["Apple", "Banana", "Cherry", "Date", "Fig", "Grapes"]
  });
});

I get the same error when I am not authenticated or I am calling a function that doesn't exist.

This is the index.html file:

  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-functions.js"></script>  

I can't find latest versions.

How to fix that?

The web error is:

"Access to fetch at 'https://us-central1-xxx.cloudfunctions.net/listFruit' from origin 'http://localhost:40423' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

I have enabled cors in firebase functions:

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

Answer 1

I think the root cause is because you specify the region, I fixed it by omitting the region. I answered a similar issue here https://stackoverflow.com/a/73100153/10294178.

Hope it helps

===UPDATE===

The real root cause is the region you specified in the cloud functions and the firebase functions are different, I already update the answer on the link I provided before

Answer 2

As you will see in the doc for Callable Cloud Functions, you don't need to use cors in a Callable CF.

You return an array, which can be JSON encoded, so you should not encounter any problem with:

exports.listFruit = functions.https.onCall((data, context) => {
    return ["Apple", "Banana", "Cherry", "Date", "Fig", "Grapes"];
});

Answer 3

In my case, I forgot to include the function in index.ts, so it wasn’t deployed. Double-check that your function is correctly named and deployed