5

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?
Stein.
  • 1,412
  • 2
  • 10
  • 18
  • Thanks for using [edit] button. Please avoid posting multiple questions about the same matter and creating work for others. Cheers. – M-- Feb 20 '20 at 22:21

2 Answers2

3

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.

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!

gso_gabriel
  • 4,199
  • 1
  • 10
  • 22
  • 1
    Thanks a lot for your help. Having looked at all of this though, I think that I should add `const express = require('express'); const cors = require('cors')({origin: true}); const app = express(); app.use(cors({ origin: true }));` with express in Javascript. I did not write any JS Code though. It is all written in Flutter. I don't know how to add this to my app. I could also not find any docs on how to set cors for all http requests made from flutter. – Stein. Feb 20 '20 at 16:34
  • Hi @Stein. this question [here](https://stackoverflow.com/questions/57765054/enable-cors-while-an-xmlhttprequest-error-occurs-in-flutter-web) provides more clarification regarding CORS on Flutter. Besides that, in case you want to check if everything is well configured on the Firebase side, I would recommend you to take a look at the documentation that I mentioned in my answer, about enabling CORS on Firebase. – gso_gabriel Feb 21 '20 at 09:26
3

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

Neifen
  • 2,546
  • 3
  • 19
  • 31