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>Please sign in to leave a comment.
When debugging, the
x-ijtheader 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 onHi 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