I'm developing a flutter web application and when I run it on the debug mode (local host) it works as a charm, my firestore requests works and storage urls too, but when I deploy it to Firebase Hosting, I can't load the pictures using the url from storage. This is what I get:
Access to fetch at 'https://firebasestorage.googleapis.com/v0/b/url-to-my-picture/?token=firestorage-key' from origin 'https://my-project.web.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I searched for this and I got that I needed to set up my hosting on the firebase.json file and this is what I've done on the hosting section:
"hosting": {
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
}
]
},
But no success. Note that I'm only using Flutter Web and the Firebase itself. No NodeJs, no php.
EDIT: This is how I load the picture:
...
NetworkImage(
pic.url,
),
...
After following the set-up through google shell, it's now working!