Symfony+Vue+Webpack Encore中ffmpeg.wasm报ShareArrayBuffer未定义错误

开发环境配置（Webpack Encore Dev Server） #

在你的webpack.config.js中，通过configureDevServerOptions方法添加所需响应头：

// webpack.config.js
const Encore = require('@symfony/webpack-encore');

// 其他Encore配置代码...

Encore.configureDevServerOptions(options => {
    options.headers = {
        'Cross-Origin-Opener-Policy': 'same-origin',
        'Cross-Origin-Embedder-Policy': 'require-corp'
    };
});

module.exports = Encore.getWebpackConfig();

配置完成后重启encore dev --watch，dev server就会自动携带这两个响应头，满足ffmpeg.wasm对SharedArrayBuffer的依赖要求。

生产环境配置 #

生产环境需要在服务器或Symfony应用层面添加响应头，两种方式可选：

方式1：Symfony事件监听添加

创建响应事件监听器：

// src/EventListener/AddCorsHeadersListener.php
namespace App\EventListener;

use Symfony\Component\HttpKernel\Event\ResponseEvent;

class AddCorsHeadersListener
{
    public function onKernelResponse(ResponseEvent $event): void
    {
        if (!$event->isMainRequest()) {
            return;
        }

        $response = $event->getResponse();
        $response->headers->set('Cross-Origin-Opener-Policy', 'same-origin');
        $response->headers->set('Cross-Origin-Embedder-Policy', 'require-corp');
    }
}

在services.yaml中注册监听器：

# config/services.yaml
services:
    App\EventListener\AddCorsHeadersListener:
        tags:
            - { name: kernel.event_listener, event: kernel.response }

方式2：服务器直接配置

• Nginx：在站点配置中添加

server {
    # 其他配置...
    add_header Cross-Origin-Opener-Policy same-origin;
    add_header Cross-Origin-Embedder-Policy require-corp;
}

• Apache：在.htaccess或虚拟主机配置中添加

Header set Cross-Origin-Opener-Policy "same-origin"
Header set Cross-Origin-Embedder-Policy "require-corp"

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