Vue.js中Firebase Auth弹窗登录出现Cross-Origin-Opener-Policy错误

问题重现 #

• 环境：Vue.js 前端 + Nest.js 后端，localhost 本地测试
• 触发代码：

import { signInWithPopup } from 'firebase/auth'
const signInWithGoogle = () => {
  const providers = new GoogleAuthProvider()
  signInWithPopup(getAuth(), providers)
    .then(() => {
      router.push({ name: 'home' })
    })
    .catch((error) => {
      console.log('error')
      console.log(error)
      alert(error.message)
    })
}

• 症状：点击「使用Google登录」后弹窗打开，控制台出现两次 Cross-Origin-Opener-Policy policy would block the window.closed call 错误，登录功能正常但报错无法消除。

解决方案 #

1. 调整前端开发服务器的跨源头配置 #

针对Vue开发环境（Vite或Vue CLI），在配置文件中添加适配Firebase弹窗的跨源响应头：

若使用Vite（vite.config.js）：

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

若使用Vue CLI（vue.config.js）：

module.exports = {
  devServer: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin-allow-popups',
      'Cross-Origin-Embedder-Policy': 'unsafe-none',
    },
  },
}

说明：same-origin-allow-popups 允许同源页面打开的弹窗与主页面保持上下文关联，避免COOP拦截；unsafe-none 允许加载跨源资源，适配Firebase登录弹窗的跨域需求。

2. 检查Nest.js后端的头配置 #

确保后端没有强制设置严格的COOP头，避免与前端配置冲突：

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: 'http://localhost:5173', // 替换为你的前端实际端口
    credentials: true,
  });
  // 移除或注释掉这类严格的COOP头配置
  // app.use((req, res, next) => {
  //   res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
  //   next();
  // });
  await app.listen(3000);
}
bootstrap();

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

浏览器缓存的旧响应头可能导致冲突，清空缓存及Firebase相关Cookie后重新测试登录流程。

注：以上配置针对localhost开发环境，生产环境可根据安全需求调整COOP/COEP策略，需确保Firebase Auth弹窗流程兼容。

内容的提问来源于stack exchange，提问作者Peter Plevko