由於 Cross-Origin-Opener-Policy 錯誤，Google 登入無法在帶有 Firebase 的 Next.js 中運作

Question

我正在使用Next.js和Firebase開發網路應用程式。我已在應用程式中成功實現了Google登錄，但遇到了導致登入過程無法按預期完成的問題。當我嘗試登入時，會按預期顯示一個彈出視窗。但是，在控制台中，我看到以下錯誤：Cross-Origin-Opener-Policypolicywouldblockthewindow.closedcall.由於此錯誤，登入過程無法完成，使用者也無法正確登入。

P粉616111038 · Answer

是的，這可能與您的頁面、登入頁面的 COOP 配置以及它們的互動方式有關。當兩個頁面沒有相同的 COOP 時，它們最終會出現在單獨的瀏覽上下文群組中，這可能會阻止某些交互，例如 window.close 方法。

在沒有看到您的程式碼和實作的情況下很難給出準確的解決方案，但是您可以嘗試修改您的 COOP，使其與登入頁面的 COOP 相符。這可以是same-origin或same-origin-allow-popups。

這些標頭可以在 NextJS 配置中設定：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"
          },
        ],
      },
    ];
  },
};

P粉616383625 · Answer

這似乎是一個很長一段時間沒有解決的問題。不過，請嘗試以下操作

請檢查範圍 - https://stackoverflow.com/a/76574604/9640177
如果您使用 Google API，請確保您已在 Firebase 和 GCP 上設定正確的授權網域或 URI - https:// stackoverflow.com/a/76547658/9640177

#您也可以參考跨域隔離指南- https://web.dev /cross-origin-isolation-guide/ 和MDN 文件，了解有關Cross-Origin- Opener-Policy 的更多資訊

如果您使用 Google API，請確保也新增具有連接埠的 URI，例如 localhost:3000。您可以查看我的即時網站 - https://radheshyamdas.com/ 我正在使用使用 Next 建立的 firebase auth .js