Express中配置Cross-origin-Embedder-Policy与Cross-origin-Opener-Policy头部的问题

核心原因 #

现在浏览器对SharedArrayBuffer的使用有强制跨域隔离要求，必须同时设置两个响应头才能启用该API：

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp
  缺少任意一个都会触发你遇到的ReferenceError，Chrome的警告也是同样原因。

第一步：修正Express后端的头部配置 #

你之前的问题出在中间件顺序错误——自定义头部设置的中间件必须放在cors中间件之前，否则cors中间件可能提前处理响应，导致自定义头无法生效。

正确的代码顺序：

// 先设置关键的跨域隔离头部
app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
  next();
});

// 再初始化并使用cors中间件
const corsMiddleware = cors({
  credentials: true,
  origin: allowedCorsOrigins
});
app.use(corsMiddleware);

app.options('*', corsMiddleware);

验证方法：打开浏览器开发者工具的「网络」面板，调用任意后端API，查看响应头是否包含这两个字段。

第二步：配置前端开发服务器的头部（关键！） #

如果你用Create React App、Vite这类前端工具，前端页面本身的响应（来自开发服务器）也需要设置这两个头——浏览器是根据页面的响应头判断是否启用SharedArrayBuffer的，仅后端API设置无效。

针对Create React App： #

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js文件：

const { override } = require('customize-cra');

module.exports = override(
  (config, env) => {
    if (env === 'development') {
      // 给开发服务器添加响应头
      config.devServer.headers = {
        ...config.devServer.headers,
        'Cross-Origin-Opener-Policy': 'same-origin',
        'Cross-Origin-Embedder-Policy': 'require-corp'
      };
    }
    return config;
  }
);

3. 修改package.json的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

针对Vite： #

直接修改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',
      'Cross-Origin-Embedder-Policy': 'require-corp'
    }
  }
});

额外注意事项 #

• 如果页面加载了跨域资源（比如CDN图片、第三方脚本），require-corp会阻止这类资源加载。此时有两种解决办法：
  1. 替换为同域资源，或确保资源服务器设置了Cross-Origin-Resource-Policy: cross-origin头。
  2. 将Cross-Origin-Opener-Policy改为same-site（规则更宽松，但仍能启用SharedArrayBuffer）。
• 生产环境部署时，前端静态文件的服务器（比如Nginx）也需要设置这两个头，不能仅依赖后端API配置。

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