Firebase emulator gives CORS error when trying to use Firestore

user_522337 0
Viewed 529

I have set up emulator to work, I can access it on port 4000. I also see the Firestore status "ON"

However, when I try to make a query, I get:

Access to fetch at 'http://localhost:8080/google.firestore.v1.Firestore/Listen/channel?database=projects%2Ffresh-divot%2Fdatabases%2F(default)&VER=8&RID=14788&CVER=22&X-HTTP-Session-Id=gsessionid&%24httpHeaders=X-Goog-Api-Client%3Agl-js%2F%20fire%2F9.6.6%0D%0AContent-Type%3Atext%2Fplain%0D%0A&zx=6jc2pop1rvwd&t=1' from origin 'http://localhost:1234' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

My setup is as follows: react web app running on localhost:1234 my emulator firestore running on localhost:8088

my settings are as follows:


let config = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_TO,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  databaseURL: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
};

if (location.hostname === "localhost") {
  config = {
    databaseURL: "http://localhost:8088?ns=emulatorui",
    projectId: "demo-test",
    apiKey: "random-string-without-apikey-i-get-error",
  };
}

const app = initializeApp(config);
export const auth = getAuth();

// Functions
const functions = getFunctions();
const fdb = getFirestore();

if (location.hostname === "localhost") {
  connectFunctionsEmulator(functions, "localhost", "5001");
  connectAuthEmulator(auth, "http://localhost:9099");
  connectFirestoreEmulator(fdb, "localhost", 8080);
}

Can someone point to me how to resolve this? None of the online tutorials seem to have that issue, so feel I am missing something obvious.

firebase-tools google-cloud-firestore firebase
2 Answers

Try this instead...

initializeApp(config)
// add after initializeApp
const db = getFirestore()
connectFirestoreEmulator(db, 'localhost', 8090)

...where 8090 is your Firestore port

user_61857000

Set firebase.rules to allow read and write access by removing condition if false

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }  }
}

Later on, don't forget to update with appropriate rules per user role for security.

user_20318630
Related