在Express+React全栈应用中配置COOP、COEP头解决SharedArrayBuffer问题

AI 小北

2026-10-9

Express 配置跨源隔离响应头操作指南

配置位置说明

你用Express托管打包后的React静态资源，两个跨源隔离响应头直接在Express服务代码中添加即可，不需要修改React前端代码。

两种常用配置方案

方案1：全局生效配置

适合所有页面都需要开启跨源隔离的场景，配置最简单：

打开你的Express入口文件（通常是app.js/index.js）
在所有路由、静态资源托管逻辑之前添加如下中间件：

const express = require('express')
const app = express()

// 新增的响应头配置中间件，放在最顶部
app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
  next()
})

// 后面保留你原来的逻辑，比如静态资源托管、接口路由等
app.use(express.static('dist')) // 这里dist是你React打包后的文件夹名
app.listen(3000)

方案2：仅根文档生效配置

如果只需要给React的根入口index.html加头，不需要全局生效，用这个方案：

const express = require('express')
const path = require('path')
const app = express()

// 先匹配根路径请求，单独配置头后返回index.html
app.get('/', (req, res) => {
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
  // 路径替换成你实际的index.html存放地址
  res.sendFile(path.join(__dirname, 'dist', 'index.html'))
})

// 再放静态资源托管逻辑
app.use(express.static(path.join(__dirname, 'dist')))
app.listen(3000)