Cross-Origin-Opener-Policy エラーにより、Firebase を使用した Next.js で Google サインインが機能しない
P粉020085599
2023-08-25 20:30:33
<p>Next.js と Firebase を使用して Web アプリケーションを開発しています。アプリケーションに Google サインインを正常に実装しましたが、サインイン プロセスが期待どおりに完了できないという問題が発生しています。 </p>
<p>ログインしようとすると、予想どおりポップアップが表示されます。ただし、コンソールには次のエラーが表示されます: </p>
<pre class="brush:php;toolbar:false;">Cross-Origin-Opener-Policy ポリシーは window.closed 呼び出しをブロックします。</pre>
<p>このエラーにより、ログイン処理を完了できず、ユーザーは正しくログインできません。 </p>
<p>さらに詳しい内容: この機能をローカルホストの開発環境でテストしています。 <strong>この問題は Chrome には存在しますが、Firefox には存在しません。 </strong></p>
<p>このエラーは、Cross-Origin-Opener-Policy の設定ミスによって引き起こされますか?その場合、Firebase での Google サインイン用に Next.js アプリケーションでこのポリシーを適切に構成するにはどうすればよいですか? </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
はい、これはページの COOP 設定、ログイン ページ、およびそれらの相互作用に関係している可能性があります。 2 つのページが同じ COOP を持たない場合、それらは別々の閲覧コンテキスト グループになるため、window.close メソッドなどの特定の対話が妨げられる場合があります。
コードと実装を見ずに正確な解決策を与えることは困難ですが、ログイン ページの COOP と一致するように COOP を変更してみることはできます。 これは、
same-originまたはsame-origin-allow-popupsです。これらのヘッダーは NextJS 構成で設定できます: https://nextjs.org/docs/pages/api-reference/next-config-js/headers
あなたの場合:
リーリーこれは長い間解決されていない問題のようです。ただし、次の
を試してください。クロスオリジン分離ガイド - https://web.dev /cross-origin-isolation-guide/ および MDN ドキュメント を参照して詳細を確認することもできます。クロスオリジン - オープナー ポリシーの詳細
Google API を使用している場合は、
で構築された firebase auth .js を使用していますlocalhost:3000などのポートを含む URI も必ず追加してください。私のライブウェブサイトをチェックしてください - https://radheshyamdas.com/ Next