저는 Next.js와 Firebase를 사용하여 웹 애플리케이션을 개발하고 있습니다. 내 애플리케이션에서 Google 로그인을 성공적으로 구현했지만 로그인 프로세스가 예상대로 완료되지 않는 문제가 발생했습니다.
로그인을 시도하면 예상한 대로 팝업이 나타납니다. 그러나 콘솔에는 다음 오류가 표시됩니다.
Cross-Origin-Opener-Policy 정책은 window.closed 호출을 차단합니다.
이 오류로 인해 로그인 프로세스가 완료될 수 없으며 사용자가 올바르게 로그인할 수 없습니다.
추가 컨텍스트: 저는 localhost의 개발 환경에서 이 기능을 테스트하고 있습니다. 이 문제는 Chrome에서는 발생하지만 Firefox에서는 발생하지 않습니다.
이 오류는 Cross-Origin-Opener-Policy의 잘못된 구성으로 인해 발생합니까? 그렇다면 Firebase를 사용한 Google 로그인을 위한 Next.js 애플리케이션에서 이 정책을 올바르게 구성하려면 어떻게 해야 합니까?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
예, 이는 페이지, 로그인 페이지의 COOP 구성 및 상호 작용 방식과 관련이 있을 수 있습니다. 두 페이지에 동일한 COOP가 없으면 별도의 탐색 컨텍스트 그룹이 되어 window.close 메서드와 같은 특정 상호 작용을 방해할 수 있습니다.
코드와 구현을 보지 않고 정확한 솔루션을 제공하기는 어렵지만 로그인 페이지의 COOP와 일치하도록 COOP를 수정해 볼 수 있습니다.
same-origin或same-origin-allow-popups일 수 있습니다.다음 헤더는 NextJS 구성에서 설정할 수 있습니다:https://nextjs.org/docs/pages/api-reference/next-config-js/headers
귀하의 경우:
으아악이 문제는 오랫동안 해결되지 않은 문제인 것 같습니다. 하지만 다음을 시도해 보세요
Cross-Origin-Opener-Policy에 대해 자세히 알아보려면 Cross-Origin 격리 가이드 -https://web.dev/cross-origin-isolation-guide/및MDN 문서
를 참조할 수도 있습니다.Google API를 사용하는 경우 포트와 함께 URI도 추가해야 합니다(예:
로 구축된 Firebase auth .js를 사용하고 있습니다.localhost:3000). 내 라이브 웹사이트를 확인하실 수 있습니다 -https://radheshyamdas.com/저는 Next