CORS policy error

Hello,

I apologize if this question is not very good (I am very new to JavaScript and Firebase). I am using WebStorm as my editor and have been trying to set up Firebase by following this tutorial: https://www.youtube.com/watch?v=rQvOAnNvcNQ. So far, it has been helpful, but when I run index.html, I get the following error:

I asked this question on the Firebase GitHub discussion, and I was told that the "x-ijt" header that is interfering with the request may be something that Webstorm adds. I was also encouraged to ask my question in a Webstorm forum.

In case this helps, here is my index.js code:

import { initializeApp } from "https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js";
import { getAuth, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js";
import { getFirestore } from 'https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js';

// Your web app's Firebase configuration

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseApp = initializeApp({

    apiKey: "apiKey information",

    authDomain: "authDomain information",

    databaseURL: "databaseURL information",

    projectId: "projectId information",

    storageBucket: "storageBucket information",

    messagingSenderId: "messagingSenderId information",

    appId: "appId information",

    measurementId: "measurementId information"

});

const auth = getAuth(firebaseApp);
const db = getFirestore(firebaseApp);

// Detect auth state
onAuthStateChanged(auth, user => {
    if (user != null) {
        console.log('logged in!');
    }
    else {
        console.log('No user');
    }
})

And my index.html code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module" src="index.js"> </script>
</head>
<body>

</body>
</html>
1
2 comments

When debugging, the x-ijt header is sent for request signing to prevent requests from outside from being rejected; header is not sent if Allow unsigned requests in Settings | Build, Execution, Deployment | Debugger is enabled, so, if you are facing issues because of this header, you have to turn this option on

1

Hi Elena,

I just wanted to say thank you very much for your help! I was also doing some more research into this, and I think this method could also work (in case anyone else is having trouble with this): https://stackoverflow.com/questions/57822107/cors-errors-from-font-awesome-font-in-angular-app.

Thank you again for your time!

Sincerely,

Michelle

0

Please sign in to leave a comment.