Flutterfire: [cloud_functions] Cloud Functions Web CORS issue and empty request body

[alisonthemonster]

Describe the bug
Using the cloud_functions library(cloud_functions: ^0.4.2+3) in my Flutter Web project I tried the following code:

final HttpsCallable callable = CloudFunctions.instance.getHttpsCallable(
      functionName: 'myFunctionName',
    );
dynamic response = await callable.call(<String, dynamic>{
      'key': value,
      'key1': value,
      'key2': value
    });

When it runs I see this error in the console:

Access to fetch at 'https://us-central1-<mycloudfunction>.cloudfunctions.net/myFunctionName' from origin 'http://localhost:56152' 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 also see that in my Cloud Functions logs the function is being invoked but my request body is empty despite setting values there. I have tested my functions using Postman and they work as expected there. This StackOverflow question had the same issue but no mention of CORS.

Additional context
In my searching people suggest to add CORS to your function, but I have tried several approaches and not had success yet. Hoping for some guidance there. Here is my function code:

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

exports.myFunction = functions.https.onRequest(async (req, res) => {
    //res.set('Access-Control-Allow-Origin', '*'); //Tried this with no success
    //cors(req, res, () => {}); //Also tried this with no success

    // logic here

    res.status(200).json({key: value});
}

Thank you in advance!

[alisonthemonster]

Flutter doctor:

[✓] Flutter (Channel beta, v1.15.17, on Mac OS X 10.14.6 18G95, locale en-US)
    • Flutter version 1.15.17 at <path>/flutter/flutter
    • Framework revision 2294d75bfa (4 weeks ago), 2020-03-07 00:28:38 +0900
    • Engine revision 5aff311948
    • Dart version 2.8.0 (build 2.8.0-dev.12.0 9983424a3c)


[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /<path>/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3.1, Build version 11C504
    • CocoaPods version 1.7.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 44.0.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[!] IntelliJ IDEA Community Edition (version 2018.3.5)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plu

[alisonthemonster]

I saw this answer on stackoverflow where it mentions using regular HTTPS triggered function vs using callable functions. Flutter is expecting a callable function and my function code is using https triggered functions.

So switched my cloud function to a callable function but sadly had even less luck. I still saw the same CORS error and this time I wasn't able to see any logs at all for my function.

I also tried adding this to my function and didn't have success there either:

res.set('Access-Control-Allow-Origin', '*');
res.set('Access-Control-Allow-Methods', 'GET, PUT, POST, OPTIONS');
res.set('Access-Control-Allow-Headers', '*');

[jans-y]

We had the same issue. We've resolved it by specifying the region.

CloudFunctions.instance
        .getHttpsCallable(functionName: 'myFunctionName')
        .call({})

⬇️⬇️⬇️

CloudFunctions(region: 'europe-west1')
        .getHttpsCallable(functionName: 'myFunctionName')
        .call({})

[alisonthemonster]

I'll have to go back and try the region trick! In the end I stopped using the flutter firebase library and just called the endpoint using http package and didn't run into any issues that way.