Firebase 和 VueJS：未捕获（承诺）DOMException：阻止了来源为“http://localhost:3000”的帧

Posted 2023-02-23

【中文标题】Firebase 和 VueJS：未捕获（承诺）DOMException：阻止了来源为“http://localhost:3000”的帧

【英文标题】：Firebase and VueJS: Uncaught (in promise) DOMException: Blocked a frame with origin "http://localhost:3000"

【发布时间】：2020-11-24 17:06:58

【问题描述】：

我正在关注官方的 firebase 身份验证教程，但我不断收到以下代码的此错误：

const provider = new firebase.auth.GoogleAuthProvider()
      firebase.auth()
        .signInWithPopup(provider)
        .catch((error) => alert(error.message))
        .then((data) => console.log(data.user, data.credential.accessToken))

这是我的控制台错误：

backend.js:12632 Uncaught (in promise) DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

我确实将 localhost 作为身份验证控制台中的白名单域

我也需要添加端口吗？假设这会有所帮助......但任何建议将不胜感激。谢谢

仅供参考，我正在使用 Nuxt (Vue)

【问题讨论】：

忘了提及使用 FirebaseUI 库时，我没有遇到任何问题，一切正常。如果我无法解决上述问题，我将使用它。

【参考方案1】：

我认为这可能是因为signInWithPopup 为身份验证提供程序加载了<iframe>。

我无法从单独发布的代码中看出，但我猜您可能正在使用 google 或 facebook auth 提供，并且您需要将 localhost 与 auth 提供者一起列入白名单，这是您无法做到的去做。

如果是这种情况，最简单的方法可能是使用像 ngrok 这样的代理来获取可通过网络访问的临时服务器（sing https 也可能有帮助）

【讨论】：

当我为生产构建并部署到远程服务器时，它工作正常。感谢您的 cmets。