使用@react-oauth/google时Google登录弹窗空白问题求助

问题详情 #

使用@react-oauth/google包实现Google登录功能，按钮能正常显示，但点击后弹出的登录窗口为空白，控制台报错：

client:180 Cross-Origin-Opener-Policy policy would block the window.closed call.

相关代码：

app.jsx #

return (
    <>
      <GoogleOAuthProvider clientId={ import.meta.env.VITE_APP_GOOGLE_CLIENT_ID }>
        <BrowserRouter>
          <Routes>
            <Route path="/">
              <Route path="" element={<Home />}/>
              <Route path="/createclub" element={<CreateClub />}/>
              <Route path="/signup" element={<Signup />}/>
              <Route path="/login" element={<Login />}/>
              <Route path="/forgot-password" element={<ForgotPassword />}/>
            </Route>
          </Routes>
        </BrowserRouter>
      </GoogleOAuthProvider>
    </>
  )

login.js #

<GoogleLogin
    onSuccess={credentialResponse => {
    console.log(credentialResponse);
    }}
    onError={() => {
        console.log('Login Failed');
    }}
    />

原因 #

这个错误是浏览器的Cross-Origin-Opener-Policy (COOP) 策略导致的：Google登录弹窗需要和父页面保持跨源通信，但当前页面的COOP设置过于严格，阻断了这种交互，最终导致弹窗无法正常加载内容。

解决方法 #

1. 调整服务器/开发环境的COOP响应头 #

修改Cross-Origin-Opener-Policy的值，允许跨源弹窗通信：

• 如果是Express服务器，添加响应头配置：

  app.use((req, res, next) => {
    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin-allow-popups');
    next();
  });
  

• 如果是Vite开发环境，在vite.config.js中配置：

  export default defineConfig({
    server: {
      headers: {
        'Cross-Origin-Opener-Policy': 'same-origin-allow-popups',
      },
    },
  });
  

注：same-origin-allow-popups是比较安全的取值，既保留同源页面的COOP隔离，又允许弹出跨源窗口并保持通信，适合登录场景；开发环境也可以临时用unsafe-none测试，但生产环境不推荐。

2. 验证Google OAuth客户端配置 #

• 登录Google Cloud控制台，确认OAuth客户端的已授权的 JavaScript 来源和已授权的重定向 URI包含你的应用域名（开发环境要加http://localhost:xxxx这类地址）。
• 在组件中打印import.meta.env.VITE_APP_GOOGLE_CLIENT_ID，确认客户端ID正确加载。

3. 清除浏览器缓存和Cookie #

浏览器缓存的旧策略或登录相关Cookie可能引发异常，清除后重新测试。

内容的提问来源于stack exchange，提问作者Opeyemi Odedeyi