启用COOP/COEP后Google OAuth按钮报错及空白弹窗求助

直接修复方案 #

方案1：调整跨域Opener策略为credentialless #

修改响应头的Cross-Origin-Opener-Policy值为credentialless，保留require-corp以继续使用SharedArrayBuffer：

res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
res.setHeader('Cross-Origin-Opener-Policy', 'credentialless');
res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');

该配置既满足SharedArrayBuffer的启用要求（需同时设置COEP和符合条件的COOP），又允许主窗口与Google认证的跨域弹窗建立通信，避免postMessage调用时的null引用错误。

方案2：切换Google认证为跳转模式 #

如果不想调整跨域头策略，可以放弃弹窗回调模式，改用跳转式认证流程：

1. 配置Google登录按钮时，指定data-login_uri指向你的后端认证接口：

<div id="g_id_onload"
     data-client_id="你的客户端ID"
     data-login_uri="/你的后端认证路径">
</div>
<div class="g_id_signin"
     data-type="standard"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>

2. 在后端接口中接收Google返回的授权码，完成令牌验证和用户登录逻辑。

问题根源 #

• Cross-Origin-Opener-Policy: same-origin会将主窗口与所有跨域窗口隔离到独立的浏览上下文组，导致主窗口无法获取Google认证弹窗的引用（变为null），触发postMessage调用时的TypeError。
• Cross-Origin-Embedder-Policy: require-corp要求所有嵌入资源必须符合跨域资源政策，Google认证弹窗的部分资源未满足该要求，导致渲染为空。

内容的提问来源于stack exchange，提问作者Jugo Rocks