如何解决Vite/React中Google登录的Cross-Origin-Opener-Policy报错？

API 探路者

2026-6-15

解决方案

问题核心

你遇到的错误源于Cross-Origin-Opener-Policy与Cross-Origin-Embedder-Policy的配置冲突：same-origin-allow-popups虽允许跨源弹窗，但搭配require-corp会限制Google登录所需的跨源资源加载，进而触发window.closed调用被阻止的错误；而设为same-origin会直接切断弹窗与父页面的跨源通信，导致无法获取授权码。

方案1：调整CORS头组合

修改vite.config.js，保留same-origin-allow-popups以支持弹窗跨源通信，同时将Cross-Origin-Embedder-Policy设为unsafe-none（或直接移除），解除对跨源资源的限制：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

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

方案2：区分开发/生产环境配置

若顾虑unsafe-none在生产环境的安全性，可仅在开发环境使用该配置，生产环境根据后端实际策略调整：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig(({ mode }) => ({
  plugins: [react()],
  server: {
    headers: mode === 'development' ? {
      'Cross-Origin-Opener-Policy': 'same-origin-allow-popups',
      'Cross-Origin-Embedder-Policy': 'unsafe-none'
    } : {
      'Cross-Origin-Opener-Policy': 'same-origin-allow-popups'
      // 生产环境可根据后端CORS规则补充其他配置
    }
  }
}))