Ionic 5 getting blocked-CORS error when trying to fetch from Firebase

In showcase.service.ts, I have the following function that fetch the data from Firebase

    fetchShowcases() {
        return this.http.get<{[key: string]: ShowcaseData}>('https://testing-br204.firebaseio.com/')
            .pipe(map(resultData => {
                const stitches = [];
                for (const key in resultData) {
                    if(resultData.hasOwnProperty(key)) {
                        stitches.push(new Stitch(
                            key,
                            resultData[key].title,
                            resultData[key].description,
                            resultData[key].imageUrl,
                            resultData[key].price,
                        )
                        );
                    }
                }
                return stitches;
            }))
    }

And in page.ts the said function is being called on ngOnInit()

  ngOnInit() {
    this.stitchesSub = this.showcaseService.fetchShowcases().subscribe(stitches => {
      this.showcases = stitches;
    })
  }

When tested both in localhost and after deployed the ionic app to firebase, it kept giving the following error:
Access to XMLHttpRequest at 'https://console.firebase.google.com/project/testing-br204/database/data/' (redirected from 'https://testing-br204.firebaseio.com/') from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Where can I configure to allow CORS policy in Ionic?

gsutil cors set cors.json gs://testing-br204.firebaseio.com