在 localhost 上启用 SharedArrayBuffer答案

【问题标题】：Enable SharedArrayBuffer on localhost在 localhost 上启用 SharedArrayBuffer
【发布时间】：2021-12-30 19:10:53
【问题描述】：

尝试运行 ffmpeg.wasm 时，我不断收到“未定义 SharedArrayBuffer”错误。看来这是在 Webassembly 方面。无论如何，我知道这是一个可以通过跨源隔离解决的问题。但是，我试图在本地主机上运行它，据我了解，跨源隔离无济于事。我尝试按照guide 底部的说明进行操作，但无济于事。我也尝试过更改 Chrome//flags 的方法，但这也不起作用。我只需要能够在浏览器中运行 ffmpeg/wasm 但有点麻烦。有什么想法吗？

【问题讨论】：

你解决了吗？
我是the guide at web.dev 的作者。我很感兴趣它怎么不适合你。你能告诉我更多细节吗？

标签： javascript ffmpeg webassembly arraybuffer sharedarraybuffer

【解决方案1】：

本地主机服务器应提供所需的响应标头：

$ curl -I http://localhost/

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

此服务器脚本提供SharedArrayBuffer 可用性的基线测试：

// $ node server.mjs

import { createServer } from 'http'

createServer((request, response) => {
  response.writeHead(200, {
    'Content-Type': 'text/html; charset=utf8',
    'Cross-Origin-Opener-Policy': 'same-origin',
    'Cross-Origin-Embedder-Policy': 'require-corp',
  })
  response.write(`<script>
    document.write(window.SharedArrayBuffer
      ? '✅ SAB available'
      : '❌ SAB unavailable'
    )
  </script>`)
  response.end()
}).listen(80)

【讨论】：

【解决方案2】：

您可以通过使用以下响应标头为页面提供服务来使页面跨域隔离：

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

如果您使用 NGINX 作为代理，您只需将以下代码添加到要添加标头的位置块：：

location some-location {
  add_header "Cross-Origin-Opener-Policy" "same-origin";
  add_header "Cross-Origin-Embedder-Policy" "require-corp";     
}

或者更简单，您可以使用来自此page 的令牌来启用 SharedArrayBuffer，而无需跨域隔离页面。但是，它有一个有效期。

在您的网页中，您只需在标签中添加以下标签

<head>
    <meta http-equiv="origin-trial" content="{token}">
</head>

如果你使用 NGINX，请添加标题

add_header Origin-Trial {token};

【讨论】：