Getting CORS while using Analytics on Web

[PradyumnaKrishna]

So, I am trying to build cross platform application and using react-native-firebase to log event through firebase/analytics. I tried the demo on android, it worked fine, but on the web it gave me error

No Firebase App '[DEFAULT]' has been created - call firebase.initializeApp()

I managed to initialise the Firebase App by providing it credentials. Now when I tried to log events using react-native-firebase/analytics, it gives me CORS error during API call with google analytics.

Not sure if there is something wrong with the setup. What is the correct way to setup the firebase for web using react-native-firebase?
Take this code as reference for my setup:

if (Platform.OS === "web") {
  const firebaseConfig = {
    clientId: '',
    appId: "",
    apiKey: "",
    databaseURL: '',
    storageBucket: "",
    messagingSenderId: "",
    projectId: "",
  };
  
  // Initialize Firebase
  firebase.setReactNativeAsyncStorage(AsyncStorage);
  firebase.initializeApp(firebaseConfig)

  analytics().logEvent("home_page_view");
}

[ristewar]

Did you ever figure this out?

[ristewar]

I commented out the two 'no-cache' headers and then the Google Analytics request works fine, I get a 204 back from Google.

        const response = await fetch(url, {
          method: 'POST',
          headers: {
            accept: '*/*',
            'accept-encoding': 'gzip, deflate, br',
            'Content-Type': 'text/plain;charset=UTF-8',
            'accept-language': 'en-US,en;q=0.9',
//            'cache-control': 'no-cache',
            'content-length': '0',
            origin: 'firebase',
//            pragma: 'no-cache',
            'sec-fetch-dest': 'empty',
            'sec-fetch-mode': 'no-cors',
            'sec-fetch-site': 'cross-site',
            'user-agent': 'react-native-firebase',
          },
        });

So apparently either of those no-cache headers will cause Chrome to send a CORS preflight even when no-cors is set.

[mikehardy]

Huh - analytics is definitely supposed to work on the web. Let's take that as a given.

Are we certain google analytics doesn't support CORS if we turn off no-cors? (perhaps by also tweaking the headers slightly?)

Excellent work finding a set of things in the request that does work with no-cors set, however this may have problems with intermediate proxies perhaps 🤔

What are the headers you see come back from the request? If they make it appear that the document is always expired etc (or also has no-cache headers) then I would have less fear of caching issues despite not sending the cache control stuff in the request

[ristewar]

Welp, it's apparently because fetch() requires us to set mode: 'no-cors'. Just setting it in headers isn't sufficient. Adding that one line fixes the issue.

const response = await fetch(url, {
      method: 'POST',
+      mode: 'no-cors',
      headers: {
        accept: '*/*',
        'accept-encoding': 'gzip, deflate, br',
        'Content-Type': 'text/plain;charset=UTF-8',
        'accept-language': 'en-US,en;q=0.9',
        'cache-control': 'no-cache',
        'content-length': '0',
        origin: 'firebase',
        pragma: 'no-cache',
        'sec-fetch-dest': 'empty',
        'sec-fetch-mode': 'no-cors',
        'sec-fetch-site': 'cross-site',
        'user-agent': 'react-native-firebase',
      },
    });

[mikehardy]

ah ha! if you post a PR and do the license-bot-signing-thingie I could merge and release that in about 1 minute
I'm aware of that setting, forgot it was a setting vs a header tho

[ristewar]

Sent PR #8238