Next.js+Firebase中Google登录失败：Cross-Origin-Opener-Policy错误

DevOps 小满

2026-7-17

问题解答

这个错误确实是**Cross-Origin-Opener-Policy（COOP）**配置不当导致的。Chrome对COOP策略的校验逻辑比Firefox更严格，当主页面的COOP设置限制过严时，会阻断登录弹窗与主窗口的通信，进而导致window.closed调用被拦截，登录流程中断。

解决方法：调整Next.js的COOP策略

Google登录的弹窗流程需要主窗口与跨源弹窗保持通信能力，最合适的COOP策略是same-origin-allow-popups——它既保持主页面的同源隔离，又允许打开跨源弹窗并维持双方的通信通道。

方式1：通过`next.config.js`全局配置

在项目根目录的next.config.js中添加响应头配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)', // 对所有路由生效
        headers: [
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin-allow-popups',
          },
          // 若之前设置过COEP，需调整为unsafe-none避免冲突
          // {
          //   key: 'Cross-Origin-Embedder-Policy',
          //   value: 'unsafe-none',
          // },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

修改完成后，重启Next.js开发服务器，配置才会生效。

方式2：通过中间件（Middleware）配置

如果你的项目使用Next.js App Router，也可以通过中间件动态设置响应头：

import { NextResponse } from 'next/server';

export function middleware(request) {
  const response = NextResponse.next();
  response.headers.set('Cross-Origin-Opener-Policy', 'same-origin-allow-popups');
  // 若存在COEP配置，同步调整为unsafe-none
  // response.headers.set('Cross-Origin-Embedder-Policy', 'unsafe-none');
  return response;
}

// 匹配所有路由
export const config = {
  matcher: '/:path*',
};