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?