Firebase-js-sdk: Cross-Origin Request Blocked when performing any firestore operation.

[Metsuryu]

[REQUIRED] Describe your environment

• Operating System version: Windows 7
• Browser version: Firefox 62
• Firebase SDK version: 5.5.3
• Firebase Product: firestore

[REQUIRED] Describe the problem

The warning:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://firestore.googleapis.com/google.firestore.v1beta1.Firestore/Listen/channel?database=projects...

appears in the console every time after any firestore get, set, update, or delete request is made.
So far tested it in Firefox and Chrome, and it appears to happen only in Firefox.
Everything seems to work normally, but I still get the warning, so I'm not sure if there are any problems.

• Setting cors.json with gsutil like this:

[
    {
        "origin": ["firestore.googleapis.com"],
        "method": ["GET", "HEAD", "POST", "PUT", "DELETE", "CONNECT", "OPTIONS", "TRACE", "PATCH"],
        "maxAgeSeconds": 3600
    },
    {
        "origin": ["*"],
        "method": ["GET"],
        "maxAgeSeconds": 3600
    }
]

doesn't work.

• Adding headers to my express server and nginx (on Ubuntu) doesn't seem to work, done like this:

Express:

app.get("*", (req, res) => {
  // These headers don't seem to fix the CORS issue
  res.header("Access-Control-Allow-Origin", "firestore.googleapis.com");
  res.header("Access-Control-Allow-Methods", "DELETE, GET, POST, PUT, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  res.header("Access-Control-Allow-Credentials", true);
  res.sendFile(path.join(__dirname, "dist/index.html"));
});

And Nginx CORS settings taken from here

It has been happening for a while, but it didn't always happen.

Steps to reproduce:

Make any firestore request, like

firebase.firestore().doc("users/someUser").get().then(user => {
  console.log("Got it");
}).catch( console.error );

Then refresh the page, and the warning will appear. Sometimes they appear on page load, without needing to refresh the page, but I wasn't able to reproduce that yet.

[Metsuryu]

@davidrobertovenegas Odd, I get it only on Firefox. Chrome shows no warnings at all. By the way, I've read the entry on MDN and it says "The error is not directly related to CORS, but is a fundamental network error of some kind." so I think that means CORS settings are not at fault, but it's something else.

[CaptainYouz]

Same here. Only on Firefox. Any news on this one?

[mikelehen]

I see this too, but only when I refresh the page (or more specifically, navigate away from any page that uses Firestore). I actually see an additional warning if I have persistence enabled, which I think gives an extra clue:

An IndexedDB transaction that was not yet complete has been aborted due to page navigation. firestore.js:1:178932
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://firestore.googleapis.com/google.firestore.v1beta1.Firestore/Listen/channel?database=... (Reason: CORS request did not succeed).[Learn More]

So confusingly, these warnings are generated by the code that was running before you refreshed the page. I think when you refresh the page, all existing network connections get closed, which includes our current long-polling request (there will always be such an open request, since that's how our bidi streaming works on the web). So the warning is a bug in Firefox if anything (it closed the request itself on page navigation, so of course it did not succeed).

I think you're completely safe to just ignore it. Or you could log a bug against Firefox if you were so inclined.

[Metsuryu]

@mikelehen

only when I refresh the page

I actually can see it also on first load.

I do see more of those warnings when I refresh the page, which are probably the ones you're mentioning, but what about the one on the first page load?

Maybe it has something to do with the service worker being enabled, doing something on the background before the page is even loaded? Otherwise I don't know what it could be.

Anyway, yeah, I didn't notice any problem with these warnings so far, so they're probably safe to ignore.

[mikelehen]

Interesting. So just to be clear, you can open a blank tab (nothing loaded), open the web console window, and then navigate to your app, and you get the warning?

[Metsuryu]

Yes.
Sometimes two warnings, one soon after it loads, and one after a few more seconds.

[mikelehen]

Hrm, interesting. If you are motivated to create a small repro app that demonstrates that, I could try to take a look. But I'm going to guess it's still something similar. Maybe there's a prior instance of the service worker still running and it gets restarted or something. The fact that the app works means that the requests we care about aren't getting blocked. 🤷‍♂️

[Metsuryu]

Yeah, if it caused problems I'd look more into it, but I'm just slightly annoyed by the warnings, so I guess I'll leave it be.

[rstory2010]

I have the same problem. But in my case, after refresh appear crash page 404. And don't load.
I have
@angular/core": "^7.1.0",
@angular/fire": "^5.1.0",
firebase": "^5.5.9",
@angular/compiler-cli": "^7.1.0"

[mikelehen]

@rstory2010 Hrm. That sounds like a different issue. If you think it's a bug in Firebase, please open a new issue and follow the template to provide repro steps and expected / actual behavior, etc.