Question

我刚刚开始学习HTML / CSS / Javascript，并且正在尝试使用Firebase创建一个简单的登录页面。我无法登录现有用户，每当我尝试登录用户时，我都会在控制台中收到以下错误：

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.

我的API密钥显示在上方，而不是＆＃39; ...＆＃39;。 Firebase会输出以下错误消息：

错误：发生了网络错误（例如超时，中断连接或无法访问的主机）。

下面是我链接到index.html的code.js文件：

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();
}

我已经仔细检查过我是否正确设置了firebase，而且似乎就是这种情况。我的index.html文件如下所示：

<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>

提前感谢您帮助解决此错误。

Answer 1

我能够使用我的网站运行Firebase身份验证。正如评论和其他答案中所建议的那样，问题是我正在使用file：// protocol加载我的index.html文件。当我在我的机器上安装了python时，我打开了命令提示符并进入了制作我的网站时使用的文件目录。在这里，我调用python -m http.server并在浏览器中导航到localhost：8000。该网站在这里运作良好。

Answer 2

尝试使用某些服务器，如节点，apache http。

Firebase身份验证＆＃39;访问控制 - 允许 - 来源＆＃39;标头的值为＆＃39; null＆＃39;

2 个答案: