添加跨域隔离头后FFmpeg.wasm无法运行提示FFmpeg未定义

问题根因 #

你配置Cross-Origin-Embedder-Policy: require-corp开启跨域隔离后，所有跨域加载的静态资源都必须明确配置CORS或CORP响应头才能被浏览器正常加载。你引用的第三方域名下的ffmpeg.min.js属于跨域资源，未给script标签添加跨域标识的情况下，Firefox会直接拦截该脚本加载，因此全局不会挂载FFmpeg对象，触发未定义报错。未配置跨域隔离头时浏览器没有该限制，因此Brave浏览器可以正常运行。

解决方案 #

• 方案1：给跨域脚本标签添加crossorigin属性，修改脚本引入代码为：

<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.10.0/dist/ffmpeg.min.js" crossorigin="anonymous"></script>

公共静态资源平台默认支持CORS请求，添加该属性后即可满足跨域隔离的资源加载规则。

• 方案2：将@ffmpeg/ffmpeg、@ffmpeg/core的所有相关静态资源下载到你业务自身的域名下托管，避免跨域资源加载，从根源上规避CORP规则的拦截。
• 方案3：若你的业务没有跨域请求带身份凭证的需求，可以将响应头中的Cross-Origin-Embedder-Policy值改为credentialless，替代require-corp，该配置下无需跨域资源额外配置CORP头即可加载，仅需注意低版本浏览器的兼容性。

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