Firebase Real Time Database - CORS header ‘Access-Control-Allow-Origin’ missing

Question

I've just set up a Firebase real time database with default configuration. I'm using JavaScript to import the Firebase SDK via CDN since I can't use npm for now.

I know several similar questions have been asked and this one in particular is close to the problem I'm facing presently but none of the solutions there seem to work. I've allowed domains, edited the database rules for public access and tried different browsers but the problem persists.

Here's my import code:

<script type="module">
    import {
        initializeApp
    } from "https://www.gstatic.com/firebasejs/9.6.11/firebase-app.js";

    import {
        getDatabase
    } from "https://XXXXX-default-rtdb.europe-west1.firebasedatabase.app"; //path to my db location

    const firebaseConfig = {
        apiKey: "XXXXXXXXXXXXXXX",
        authDomain: "XXXXX.firebaseapp.com",
        databaseURL: "https://XXXXX-default-rtdb.europe-west1.firebasedatabase.app", //path to my db
        projectId: "XXXXX",
        storageBucket: "XXXXX.appspot.com",
        messagingSenderId: "1111111111",
        appId: "1:1111111:web:XXXXXX"
    };

    const app = initializeApp(firebaseConfig);

    const database = getDatabase(app);
</script>

What could I be doing wrong?

score 0 · Accepted Answer · answered Apr 28 '22 at 14:37

This is wrong:

import {
    getDatabase
} from "https://XXXXX-default-rtdb.europe-west1.firebasedatabase.app"; //path to my db location

You can't import the API from the location of your database. You need to import the SDK from the CDN that it's on, similar to what you do for initializeApp right above it:

import {
    initializeApp
} from "https://www.gstatic.com/firebasejs/9.6.11/firebase-app.js";

So something like:

import {
    getDatabase
} from "https://www.gstatic.com/firebasejs/9.6.11/firebase-database.js";

Firebase Real Time Database - CORS header ‘Access-Control-Allow-Origin’ missing

1 Answers1