NodeJS Google Sign-In在Firebase的Next.js中无法正常工作,原因是跨域开放器策略错误

piztneat  于 2023-08-04  发布在  Node.js
关注(0)|答案(5)|浏览(119)

我正在使用Next.js和Firebase开发Web应用程序。我已经成功地在我的应用程序中实现了Google登录,但我遇到了一个问题,阻止了登录过程按预期完成。
当我尝试登录时,弹出窗口按预期显示。但是,在控制台中,我看到以下错误:

Cross-Origin-Opener-Policy policy would block the window.closed call.

字符串
由于此错误,登录过程无法完成,用户未正确登录。
一些进一步的背景:我正在localhost上的开发环境中测试此功能。问题在Chrome上处于活动状态,但在Firefox上没有。
此错误是否是由于跨源开放器策略的错误配置造成的?如果是,我如何在Next.js应用程序中正确配置此策略以使用Firebase进行Google登录?


的数据

bbmckpt7

bbmckpt71#

这似乎是一个长期未解决的问题。但是,请尝试以下操作
1.请检查示波器-https://stackoverflow.com/a/76574604/9640177
1.如果您使用的是Google API,请确保在firebase和GCP上设置了正确的授权域或URI-https://stackoverflow.com/a/76547658/9640177
您也可以参考跨源隔离指南-https://web.dev/cross-origin-isolation-guide/MDN docs,了解有关Cross-Origin-Opener-Policy的更多信息
如果您使用的是Google API,请确保您还添加了带有端口的URI,例如localhost:3000。你可以看看我的现场网站-https://radheshyamdas.com/我正在使用firebase auth,用Next.js构建

9lowa7mx

9lowa7mx2#

是的,它可能与页面的COOP配置,登录页面以及它们如何交互有关。当两个页面没有相同的COOP时,它们最终会在不同的浏览上下文组中,这可能会阻止一些交互,比如window.closed方法。
在没有看到你的代码和实现的情况下很难给予一个精确的解决方案,但是你可以尝试修改你的COOP,使它与登录页面的COOP相匹配。这可能是same-originsame-origin-allow-popups
这些头可以在NextJS Config中设置:https://nextjs.org/docs/pages/api-reference/next-config-js/headers
在您的情况下:

module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Cross-Origin-Opener-Policy",
            value: "same-origin", // "same-origin-allow-popups"
          },
        ],
      },
    ];
  },
};

字符串

m0rkklqb

m0rkklqb3#

我相信你的问题与你的环境设置有关,原因是因为你显示的错误是在一个JavaScript文件下,该文件应该位于你的开发环境中,而不违反CROS策略。
应该回答的问题是:

我会建议回答这些问题,如果这是真的(你按照文件正确),然后显示有关错误的更多细节。(像开发工具下的网络)也是一个好主意是在验证时调试你的应用程序,否则如果为false,那么就按照文档进行,因为目前的问题还不清楚

tp5buhyn

tp5buhyn4#

我认为你应该在nextjs配置文件中允许firebase url。在我看来,这就像当你使用图片与网址类似。
其他提示,如果你不托管到Vercel,你必须在环境变量中提供页面的baseUrl,我记得。这也可能是一个问题。

jm2pwxwz

jm2pwxwz5#

我也面临着同样的问题,但我使用的是React,并且我已经将我的应用程序部署到了GCP桶中。我试过设置跨源开放器策略,但没有成功。我正在使用terraform,所以这里是我的google_storage_bucket的cors对象:

cors {
max_age_seconds = 3600
origin          = ["*"]
method          = ["GET", "HEAD", "PUT", "POST"]
response_header = ["Cross-Origin-Opener-Policy"]

字符串
}
你知道这是怎么回事吗

相关问题