什么是顶层文档？如何配置解决SharedArrayBuffer未定义报错

云上老周

2026-10-3

核心概念说明

什么是顶层文档：就是浏览器地址栏对应加载的最外层HTML页面，不属于任何iframe、Web Worker等嵌套上下文，你提到的两个响应头必须配置在这个顶层页面的响应中，嵌套子资源配置的对应头不生效。

响应头配置方案

根据你使用的服务类型选择对应配置方式即可：

Nginx 服务配置

在你的站点配置对应的server或location块中添加以下规则，配置后重启Nginx生效：

add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;

Apache 服务配置

在站点根目录的.htaccess文件，或虚拟主机配置中添加以下规则：

Header always set Cross-Origin-Opener-Policy "same-origin"
Header always set Cross-Origin-Embedder-Policy "require-corp"

Node.js/Express 服务配置

添加全局中间件设置响应头即可：

app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
  next()
})

本地开发脚手架配置
- Vite：在vite.config.js的server.headers字段中添加对应配置：
```
export default defineConfig({
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp'
    }
  }
})
```
- Webpack DevServer：在webpack.config.js的devServer.headers字段添加和上面一致的配置即可。