Flutter Web/Dart CORS Error with Firebase Hosting

Question

Problem

I wrote an application in Flutter Web. When I run it in the Browser (debug), I get this error:

cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.googleapis.com/identityto...

When I run it in release mode, I just get this:

Error while fetching an original source: NetworkError when attempting to fetch resource.
Source URL: org-dartlang-sdk:///sdk/lib/_internal/js_runtime/lib/js_helper.dart

Other info

• The App is hosted in Firebase Hosting but the error also occurs on localhost without Firebase
• I think the Problem is cors in both cases but the release mode just has less logs

What I tried

According to this Documentation or this Question I have to add something using Expressjs like:

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({ origin: true }));

• Is there anything like Expressjs in Dart/Flutter? I saw this but I could not get it to work.
• Or is there another way to set the headers?

Answer 1

It seems that indeed, CORS is blocking you from using Firebase to store and access data. As per the documentation Configuring cross-origin resource sharing (CORS) :

Cross Origin Resource Sharing (CORS) is a mechanism for allowing interactions between resources from different origins, something that is normally prohibited in order to prevent malicious behavior.

Considering that, you will need to configure yours to work and accept requests made via HTTP. I would recommend you to take a look at the above documentation and the following links, so you can get more information about it.

• Enabling CORS in Cloud Functions for Firebase
• Call functions via HTTP requests

Once you have them configured, you should not face both errors anymore, since the requests via HTTP will be authorized via CORS and the access to Firebase should be established.

Let me know if the information helped you!

Answer 2

So I was at the same point you were and didn't really want to create Cloud Functions to solve this. I found out that there is a possibility to edit the CORS configuration on firebase. It's ab it complicated:

You'll need to install gsutil, authorise it and then edit the CORS configuration.

You can find more here on the official firebase page