How to fix Firebase storage CORS issues in Angular and other frontend frameworks

As for front-end developers, we often faced issues with CORS (Cross-origin resource sharing), I had faced Firebase storage CORS issues in one of my Angular firebase projects. I have uploaded a few images on Firebase storage, it works perfectly on localhost for uploading, deleting, and retrieving them from the server. When I hosted my project on Firebase hosting and tried to upload new images it shows CROS issues from Firebase storage.

In this tutorial, we have demonstrated how to fix Firebase storage CORS issues in our an Angular project. It will work same for other frontend framework as we have it fixed it from our Google cloud account and not in frontend code. Let’s start it.

What is CORS and why is important

The CORS stands for Cross-Origin Resource Sharing and it is a security protocol enforced at the browser by allowing or restricting access to resources from other sites| or servers by the browser. Modern web browsers provide many built-in security mechanisms to defend against hackers and CROS is one of them. When we used HTTP|HTTPS to request different resources like images, video, javascript files,s, and other resources. The CORS allows servers to specify trusted origins for different resources that can be used in cross-origin requests.

We can define different security policy rules on CORS, like the same origin. In the same origin, requests can only be made from the same origin, that is loaded domain in the browser can only request resources linked from the same domain and can’t make requests from other domains. This will prevent malicious scripts from running from other origins and provide safety and security from hackers.

Why Firebase storage CORS issues happens ?

Firebase is one of Google’s products and made the life of developers easier as they don’t have to spend time building backend servers to build simple APIs.  The Firebase storage CORS issues happen for security reasons as we have discussed above. As a developer duties to define the CORS policy on our resources.

When we host our code at Google firebase hosting and access resources will face CORS issues like Firebase storage CORS. We have to define CORS policy by ourselves, either we can allow CROS same-origin policy or * to access from any origin.

How to fixed Firebase storage CORS issues in Angular ?

Firebase storage CORS issues happen in all frontend frameworks when we hosted our code at the cloud and access Firebase storage files like images, videos, and others. We have to follow the following steps to fix these issues.

Step 1 Access Google cloud console

The first step is to authenticate and access your Google cloud console where you have added your project, as I have given a link to it. Once you have authenticated successfully, then select the project where you want to define COR policy.

Step 2 Activate Google cloud shell and define CORS policy

Once you have selected your project and click on the terminal icon at the top right corner third icon, will activate the Google cloud shell. We don’t need to install anything and you will see a cloud shell terminal at bottom of your project page.

Once you activate the Cloud shell it will ask you to continue and click on it. Now terminal will open, and define our CORS policy in cors.json by running the following command on the Google cloud shell.

nano cors.json

It will open the cors.json file and we need to define our CORS policy.

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Defining * on the origin attribute will fix our Firebase storage CORS issues. If we want strict security CORS policy like same-origin, then replace * with our domain name and this will only allow Firebase storage to access from your domain only. Once you define the CORS policy on the cors.json file, let’s save this file by pressing the keyboard.

CTRL + x simultenous
followed by keyboard Y key

Step 3: Define CORS policy on our Firebase storage buckets

We have defined our Firebase storage CORS policy on the cors.json file and now we need to set these rules on which Firebase storage buckets. Once we save our cors.json and run the following command to apply policy on your Firebase buckets.

gsutil cors set cors.json gs://FIREBASE-STORAGE-BUCKETS-URL

You can get FIREBASE-STORAGE-BUCKETS-URL from your Firebase project console by clicking on the storage buttons and replacing them with your main Firebase storage URL link.

When I executed the above command it shows errors in my, sayings.

Anonymous caller does not have storage.buckets.update access to the Google storage bucket.

To fix these issues we need to login into our Google cloud account on the Google cloud terminal by running the following command.

gcloud auth login

We need to add our login details and it will ask you to Go to the following link in your browser with some links it will take a new tab with a secret code and you need to copy and paste it on your Google cloud shell.

Once you authenticate successfully in then, you can again set the CORS policy on your Firebase storage by running the above command again.

gsutil cors set cors.json gs://FIREBASE-STORAGE-BUCKETS-URL

Here is the screenshot of all steps in the screenshot, I hope this will be helpful.

Conclusion
We have completed how to fix Firebase storage CORS issues in Angular, this is the same for all frontend. We have to add CORS policy at Google cloud using the Google cloud shell and I hope this tutorial will be helpful for fixing these issues.

Related posts

• How to implement ionic firebase authentication
• How to implement Ionic facebook login and Ionic firebase Facebook authentication
• How to implement an ionic table with pagination.
• How to use ionic skeleton component.
• How to create a different ionic list.