如何设置跨域隔离启用 SharedArrayBuffer

需求

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

• Cross-Origin-Opener-Policy 设置为 same-origin（保护源站免受攻击）
• Cross-Origin-Embedder-Policy 设置为 require-corp（保护源站免受侵害）

不同的服务有不同的设置方法，这里简要介绍下。

解决

方案一

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

// Add headers
app.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 middleware
    next();
});

方案二

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

nginx 配置

location / {
    # 设置响应头
    add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
    add_header 'Cross-Origin-Opener-Policy' 'same-origin';
}

方案三

如果只是临时开启简单体验下 SharedArrayBuffer 这个功能，可以在启动谷歌浏览器时加