能否在CodeSandbox中设置自定义HTTP头以运行ffmpeg.wasm？

目前CodeSandbox的常规前端/静态沙箱没有直接的可视化选项来设置自定义HTTP响应头，但可以通过两种方式满足ffmpeg.wasm的运行要求：

1. 使用Node.js服务器沙箱手动添加响应头 #

搭建一个简单的Express服务器，在响应中注入所需的CORS相关头：

const express = require('express');
const app = express();
const port = 3000;

// 注入ffmpeg.wasm需要的响应头
app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
  next();
});

// 托管你的前端静态文件
app.use(express.static('public'));

app.listen(port, () => {
  console.log(`服务器运行在端口 ${port}`);
});

把你的前端代码放到public目录下，启动服务器后，访问CodeSandbox生成的服务器地址，就能获取带有指定头的响应。

2. 尝试自定义沙箱配置文件 #

在沙箱根目录创建codesandbox.json文件，添加服务器头配置（注：仅部分模板支持此配置）：

{
  "server": {
    "headers": {
      "Cross-Origin-Embedder-Policy": "require-corp",
      "Cross-Origin-Opener-Policy": "same-origin"
    }
  }
}

如果这个配置不生效，优先使用第一种服务器沙箱方案。

内容的提问来源于stack exchange，提问作者fullStackChris