El encabezado 'Access-Control-Allow-Origin' de Firebase Authentication

El encabezado 'Access-Control-Allow-Origin' de Firebase Authentication tiene un valor 'nulo'

Acabo de empezar a aprender HTML/CSS/Javascript y estoy intentando crear una página de inicio de sesión sencilla con Firebase. No puedo iniciar sesión en usuarios existentes y cada vez que intento iniciar sesión en un usuario, aparece el siguiente error en la consola:

Failed to load https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=...: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

Mi clave API se muestra arriba en lugar de '...'. Firebase muestra el siguiente mensaje de error:

Error: Se ha producido un error de red (como tiempo de espera, conexión interrumpida o host inaccesible).

Abajo está mi archivo code.js que está vinculado a index.html:

var normal = true;

window.onload = function() {
  addListeners();
}


firebase.auth().onAuthStateChanged(function(user) {
  if(user){
    // User is signed in so display logout page
    document.getElementById("submit_button_logout").style.display = "flex";
    document.getElementById("submit_button_logout").onclick = function() {
      logout();
    }
  } else {
    // User not signed in
    // alert("Please log in or sign up.")
  }
});    

function addListeners(){
  if(normal){
    document.getElementById("sign_up_a").onclick = function() {
      switchState();
    }
    document.getElementById("sign_in_a").onclick = function() {

    }
  } else {
    document.getElementById("sign_in_a").onclick = function() {
      switchState();
    }
    document.getElementById("sign_up_a").onclick = function() {

    }
  }

  document.getElementById("submit_button").onclick = function() {
    alert("clicked")
    login();
  }
}

function switchState() {
    normal = !normal;
    if(!normal){
      document.getElementById("sign_in_a").className = "inactive";
      document.getElementById("sign_up_a").className = "";
      document.getElementById("form_header").innerHTML="<h2>Sign up for an Account</h2>";
      document.getElementById("submit_button").innerHTML="Sign Up";
      addListeners();
    } else {
      document.getElementById("sign_in_a").className = "";
      document.getElementById("sign_up_a").className = "inactive";
      document.getElementById("form_header").innerHTML="<h2>Sign in to your Account</h2>";
      document.getElementById("submit_button").innerHTML="Sign In";
      addListeners();
    }
}

function login() {
  var usr = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  firebase.auth().signInWithEmailAndPassword(usr, password).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
    alert("Error: " + errorMessage);
  });
}

function sign_up() {
  var usr = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
    alert("Error: " + errorMessage);
  })
}

function logout(){
  firebase.auth().signOut();
}

Verifiqué dos veces si configuré Firebase correctamente, y parece que este es el caso. Mi archivo index.html se ve así:

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>You already know</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed" rel="stylesheet">
  <!-- <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script> -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "...",
      authDomain: "...",
      databaseURL: "...",
      projectId: "...",
      storageBucket: "...",
      messagingSenderId: "..."
    };
    firebase.initializeApp(config);
  </script>
  <script src="code.js" type="text/javascript" charset="utf-8"></script>

Gracias de antemano por su ayuda para corregir este error.

Mostrar la mejor respuesta

¿Cómo estás cargando index.html? ¿Usas un servidor HTTP? ¿O está usando el protocolo file:///? Si es esto último, entonces ese es tu problema.

intenta usar algo del servidor como nodo, apache http.

Pude hacer que la autenticación de Firebase funcionara con mi sitio web. Como se sugirió en los comentarios y otras respuestas, el problema era que estaba cargando mi archivo index.html con el protocolo file://. Como tengo Python instalado en mi máquina, abrí el símbolo del sistema y entré en el directorio de los archivos utilizados para crear mi sitio web. Aquí, llamé a python -m http.server y navegué a localhost:8000 en mi navegador. El sitio web funciona bien aquí.