如何设置跨域隔离启用 SharedArrayBuffer

需求最近在研究 ffmpeg WebAssembly 版本在网页运行的工具，发现使用到了 SharedArrayBuffer，涉及到跨域隔离的问题，需要设置两个 HTTP 消息头启用跨域隔离：

Cross-Origin-Opener-Policy 设置为 same-origin（保护源站免受攻击）Cross-Origin-Embedder-Policy 设置为 require-corp（保护源站免受侵害）不同的服务有不同的设置方法，这里简要介绍下。

解决方案一对于前端开发来说，本地开发阶段，可以起一个 Node.js 服务，用于本地开发实时调试，比如我用 Express.js (Node.js 后端框架)

// Add headersapp.use(function (req, res, next) {// 设置响应头 res.header("Cross-Origin-Embedder-Policy", "require-corp");res.header("Cross-Origin-Opener-Policy", "same-origin");

// Pass to next layer of middlewarenext();

});完整的文件可以参考： Create a server with Express.js

方案二部署到服务器上之后，一般会用 nginx 做代理服务器，这时候可以给 nginx 配置加两个响应头

nginx 配置

location / {# 设置响应头 add_header 'Cross-Origin-Embedder-Policy' 'require-corp';add_header 'Cross-Origin-Opener-Policy' 'same-origin';}方案三如果只是临时开启简单体验下 SharedArrayBuffer 这个功能，可以在启动谷歌浏览器时加参数。

以 Windows 为例，桌面上找到 chrome 图标，复制一个出来，右击 Chrome 图标 – 属性 – 目标，将原来的

"C:\Program Files\Google\Chrome\Application\chrome.exe"改成

"C:\Program Files\Google\Chrome\Application\chrome.exe" --enable-features=SharedArrayBuffer 这样用新的图标打开谷歌浏览器就是开启了 SharedArrayBuffer，本地测试用

注意一旦开启了跨域隔离，可能会对您网站上的其它跨域资源产生影响，比如 Adsense 广告，暂时也没有很好的兼容办法，需要自己做一下取舍。

总结以上就是我在使用 wasm SharedArrayBuffer 的功能的时候总结出的经验，如果有不对的地方欢迎指出。