This firebase error wasted my 161+ hours: make sure it doesn’t yours

This was my first ever “Big” project created using firebase so i didn’t had much experience with it, but this error wasn’t about experience at all, because even the most professional and experienced developers i knew, which had years and years of experience working with firebase, failed to solve it.

What exactly was this error?

Well, to be specific this error was about CORS policy, which seemed to be quite confusing in itself, but working on this error made all the concepts of CORS policies pretty understandable to me. Since, i had successfully wasted my 161+ Hours working on this single error.

This error simply logged whenever someone tried to upload an image to firebase storage, which should have been quite a simple task, but it turned to be a pretty big mess-

“Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/https://yourapp.firebase.app/o?name=collection' from origin '[http://localhost:9000](http://localhost:9000/)' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.”

Alright, let me break this down for you. Basically, this error message is saying that whenever someone tries to upload an image to Firebase Storage, it's getting blocked because of something called CORS policy.

Now, CORS policy is like a security measure that determines which web applications are allowed to access resources on a server. In this case, the server is saying, 'Hey, the request to upload this image is coming from a different place than where the image is stored, so I'm not gonna allow it.' It's frustrating because uploading images should be a simple task, but this error turned it into a whole mess.

What DIDN’T i tried?

When reading this error in the console for the first time i thought i just needed to add my domain to the firebase’s storage security rules and i did exactly that but, IT DIDN’T HELP! hmm, so what now? well i tried absolutely everything i possibly could, i rewrote my entire function that was uploading image to firebase, i tried adding CORS.json file to root directory of my project according to a big brained programmer i found on stack overflow, i even tried configuring it from google console, i tried to make it work with Gstuil tool, i tried to make it work with gcloud command line and hundreds of other solution i found online, but nothing seemed to do any good.

At the end of the day, i was so tired and feeling stuck like i never felt before, even the deadline for this project was around the corner, so i decided to get some help from my mentor and i did exactly that, i told him everything about this bug, and he did really well to help me and tried lots of solution on it, but guess that wasn’t it.

💡 Fun fact: even AI (GPT, Bing, and other models) failed to solve it.

Then i gave up! or… did i??

It's already been over 161 hours of me working on this error, but nothing seems to be working at all, i was about to give up, but then i decided to give it another shot, for the last time, But deep down, I felt so demotivated and exhausted that I didn’t know what else to try. I was scrolling through my code, staring at the screen, everything a blur. But then i had that “Wait a minute” feeling when i saw a code snippet in my IDE.

SOLUTION?!?

And then, almost out of desperation, I decided to try a solution that randomly popped into my mind. I took a deep breath and made the leap. It was a moment of truth, staring at my screen while holding my breath as everything depends on it. And to my amazement, it seemed to be working! The code worked perfectly fine, and the error message vanished.

I can't even begin to describe the overwhelming joy and relief I felt at that moment. It was like a weight had been lifted off my shoulders. I was so ecstatic that I almost cried tears of happiness. I've never been this stuck before, so successfully resolving the issue sent my dopamine levels skyrocketing. Against all odds, I did it—somehow.

The snippet i was talking about is the firebaseConfigObject provided by the firebase itself, which if you have every looked carefully you would have noticed that there’s an “authDomain” array inside that object which contains a list of all the domains authorized to access Firebase services. However, when looked in carefully, I didn’t findmy domain, it was missing from this list. And then, I manually added my domain to the 'authDomain' array, like so:

const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: [
    "xxxx.firebaseapp.com",
    "my-domain.com" //this wasn't there!! so added it manually
  ],
  projectId: "xxxx",
  storageBucket: "xxx",
  messagingSenderId: "xxxxx",
  appId: "xxxxxx",
  measurementId: "xxxx",
}

Don't forget to bookmark this page so you can easily revisit this solution whenever you encounter a CORS-related issue with Firebase, whether it's with Firebase Storage or any other Firebase service.

Your support means the world to me, so if you've found my writings helpful, consider showing your love at buymeacoffee.com/lemme.code.

And if you're interested in collaborating on a project, feel free to reach out to me at contact.lemme.code@gmail.com.

Thank you from the bottom of my heart for your time and support. 💗