我正在使用Next.js和Firebase开发Web应用程序。我已经成功地在我的应用程序中实现了Google登录,但我遇到了一个问题,阻止了登录过程按预期完成。
当我尝试登录时,弹出窗口按预期显示。但是,在控制台中,我看到以下错误:
Cross-Origin-Opener-Policy policy would block the window.closed call.
字符串
由于此错误,登录过程无法完成,用户未正确登录。
一些进一步的背景:我正在localhost上的开发环境中测试此功能。问题在Chrome上处于活动状态,但在Firefox上没有。
此错误是否是由于跨源开放器策略的错误配置造成的?如果是,我如何在Next.js应用程序中正确配置此策略以使用Firebase进行Google登录?
的数据
5条答案
按热度按时间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构建9lowa7mx2#
是的,它可能与页面的COOP配置,登录页面以及它们如何交互有关。当两个页面没有相同的COOP时,它们最终会在不同的浏览上下文组中,这可能会阻止一些交互,比如window.closed方法。
在没有看到你的代码和实现的情况下很难给予一个精确的解决方案,但是你可以尝试修改你的COOP,使它与登录页面的COOP相匹配。这可能是
same-origin
或same-origin-allow-popups
。这些头可以在NextJS Config中设置:https://nextjs.org/docs/pages/api-reference/next-config-js/headers
在您的情况下:
字符串
m0rkklqb3#
我相信你的问题与你的环境设置有关,原因是因为你显示的错误是在一个JavaScript文件下,该文件应该位于你的开发环境中,而不违反CROS策略。
应该回答的问题是:
我会建议回答这些问题,如果这是真的(你按照文件正确),然后显示有关错误的更多细节。(像开发工具下的网络)也是一个好主意是在验证时调试你的应用程序,否则如果为false,那么就按照文档进行,因为目前的问题还不清楚
tp5buhyn4#
我认为你应该在nextjs配置文件中允许firebase url。在我看来,这就像当你使用图片与网址类似。
其他提示,如果你不托管到Vercel,你必须在环境变量中提供页面的baseUrl,我记得。这也可能是一个问题。
jm2pwxwz5#
我也面临着同样的问题,但我使用的是React,并且我已经将我的应用程序部署到了GCP桶中。我试过设置跨源开放器策略,但没有成功。我正在使用terraform,所以这里是我的google_storage_bucket的cors对象:
字符串
}
你知道这是怎么回事吗