Firebase 身份验证失败并出现 auth/network-request-failed 网络错误（例如超时答案

【问题标题】：Firebase authentication failing with auth/network-request-failed A network error (such as timeoutFirebase 身份验证失败并出现 auth/network-request-failed 网络错误（例如超时
【发布时间】：2023-03-29 04:20:01
【问题描述】：

我在尝试进行 Firebase 身份验证时遇到了非常奇怪的行为。更重要的是，我制作了一个有效的版本和一个无效的版本。一、适用的版本：

<!doctype html>
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
<script>

// Initialize Firebase
var config = {
  apiKey: "AIzaSyDapkNCu9UwitvO84PwQHnUQ6e4g6UK7JM",
  authDomain: "********.firebaseapp.com",
  databaseURL: "https://*******.firebaseio.com",
  projectId: "********",
  storageBucket: "********.appspot.com",
  messagingSenderId: "582605565305"
};

  firebase.initializeApp(config);
</script>
</head>


<body>
<script>
    firebase.auth().signInWithEmailAndPassword("myemail@abc.xyz", "mypassword").catch(function(error) {
// Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  alert(errorCode + " " + errorMessage);
// ...
});

</script>

</body>
</html>

现在版本不起作用并给我这个问题标题中所述的错误。

<!doctype html>
<html>
<head>
  <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>

<script>
// Initialize Firebase
var config = {
  apiKey: "AIzaSyDapkNCu9UwitvO84PwQHnUQ6e4g6UK7JM",
  authDomain: "**********.firebaseapp.com",
  databaseURL: "https://*********.firebaseio.com",
  projectId: "**********",
  storageBucket: "**********.appspot.com",
  messagingSenderId: "582605565305"
};
  firebase.initializeApp(config);
</script>

<script src="myfirebase.js"></script>
</head>

<body>
<form name="myform">
  <span class="prm">Email</span><input type="text" name="email"></br>
  <span class="prm">Password</span><input type="password" name="password" ></br>
  <input type="image" src="some.png" onClick="loginToFirebase();">
</form>

</body>
</html>

还有 myfirebase.js

function loginToFirebase(){
  var myform = document.forms.myform;
  if(myform){
    alert("trying to log as:" + myform.email.value + " and:" + myform.password.value);
    firebase.auth().signInWithEmailAndPassword(myform.email.value, myform.password.value).catch(function(error) {
    // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      alert(errorCode + " " + errorMessage);
    // ...
  });
}
}

如您所见，这是一个非常简单的示例，两个版本几乎相同。唯一的区别是，在工作版本中，电子邮件和密码被硬编码到源代码中，但在非工作版本中，有一个 HTML 表单和一个小 javascript。我提出警告声明以确保一切正常。

最奇怪的事情来了。这两个版本都适用于 Firefox，但不适用于 Chrome、Opera 和 Konqueror（我在 Linux/Fedora24 上工作）。一样的auth/network-request-failed A network error (such as timeout, interrupted connection or unreachable host) has occurred. 显示出来了。

Firebase 控制台显示工作版本确实有效。

我清除了 Chrome 缓存，但没有结果。

谁能帮帮我？

【问题讨论】：

标签： google-chrome authentication firefox firebase

【解决方案1】：

已解决！

我意识到它与内容安全策略有关，尝试了各种选项，这就是解决方案。首先，而不是内联

onClick="loginToFirebase();"

我必须注册事件监听器

function initApp(){
  document.getElementById('mybutton')
        .addEventListener('click', loginToFirebase);
}

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

这不是我的问题的结束，尝试指定内容安全策略，但没有结果。

在仔细查看 Firebase 演示代码后，我决定删除 <form> 标记，就是这样！

希望对某人有所帮助:)

【讨论】：

为什么？这背后的逻辑是什么？