Skip to content

使用 COOP/COEP 启用 Wasm 线程(SharedArrayBuffer)

如果你的网页游戏(或引擎导出)使用 WebAssembly 线程,它通常依赖 SharedArrayBuffer。现代浏览器要求开启跨域隔离才能使用它。

Diagram: cross-origin isolation headers

1)快速检查:你是否处于隔离状态?

打开 DevTools 并运行:

js
self.crossOriginIsolated

如果返回 true,那么你已经处于使用 SharedArrayBuffer 所需的安全状态。

官方参考:

  • https://developer.mozilla.org/docs/Web/API/Window/crossOriginIsolated

2)你需要的两个响应头

在你的 HTML(通常也是整个应用)的响应中加上:

http
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

官方参考:

  • https://web.dev/articles/why-coop-coep
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
  • https://developer.chrome.com/blog/enabling-shared-array-buffer/

3)"还是不行"的头号原因:子资源

开启 COEP: require-corp 后,你的页面就不能再自由嵌入跨域资源了。

如果你加载跨域的脚本/图片/worker/视频等,这些资源必须通过下列方式之一明确允许:

  • CORS(Access-Control-Allow-Origin
  • CORP(Cross-Origin-Resource-Policy

官方参考:

  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cross-Origin_Resource_Policy

4)可复制粘贴的配置

Nginx

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

Node / Express

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

Cloudflare Pages(_headers

txt
/*
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp

5)调试清单

  • 在 Network 面板里确认文档响应携带了这些响应头。
  • 检查 self.crossOriginIsolated
  • 查看被阻止的请求(DevTools 常见提示包含 "blocked … by COEP")。
  • 移除或自建那些不支持 CORS/CORP 的第三方脚本。

相关阅读

外部资源