React应用COOP配置方法及“window.closed调用被阻止”报错解决

当React应用的服务器设置了严格的Cross-Origin-Opener-Policy（COOP）策略时，跨源弹窗的window.closed调用会被浏览器拦截，触发你遇到的错误。下面分不同部署场景说明如何配置COOP策略，以及策略选择建议：

策略选择说明 #

先明确三种COOP策略的适用场景，避免盲目配置：

• same-origin-allow-popups：推荐，允许同源页面打开弹窗，弹窗可与跨源页面正常交互，同时保留同源页面的上下文隔离，安全性较高。
• unsafe-none：完全取消跨源上下文隔离，允许任意跨源页面共享上下文，安全性最低，仅在必须兼容旧场景时使用。
• same-origin：最严格，仅允许同源页面交互，会直接阻止跨源弹窗的window.closed调用，不适合需要跨源弹窗的业务场景。

不同场景的配置方法 #

1. Create React App（CRA）开发环境 #

在项目根目录创建src/setupProxy.js文件，添加响应头配置：

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

修改后重启开发服务，配置即可生效。

2. Nginx生产部署 #

在Nginx的站点配置文件（如/etc/nginx/sites-available/your-app.conf）的server块中添加add_header指令：

server {
  # 现有配置（监听端口、root路径等）
  listen 80;
  root /path/to/your/react/build;

  # 添加COOP配置
  add_header Cross-Origin-Opener-Policy "same-origin-allow-popups" always;
}

执行sudo nginx -s reload重启Nginx使配置生效。

3. Apache生产部署 #

在项目根目录的.htaccess文件（或Apache主配置文件httpd.conf）中添加：

Header set Cross-Origin-Opener-Policy "same-origin-allow-popups"

重启Apache服务后配置生效。

4. Vite构建的React应用 #

在vite.config.js中配置开发和预览环境的响应头：

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',
    },
  },
  preview: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin-allow-popups',
    },
  },
});

生产构建后，部署时需确保服务器也配置相同的COOP头（参考Nginx/Apache配置）。

内容的提问来源于stack exchange，提问作者Akash Jana