如何在ReactJS项目中使用ffmpeg.js并解决worker加载403错误

你的报错既不是localhost的问题，也不是React框架本身的问题，更不是ffmpeg.js库无法使用。核心原因是web worker的引用路径错误：

• 直接写new Worker("ffmpeg-worker-webm.js")时，浏览器会默认从站点根路径（localhost:3000/）请求该文件
• 你通过npm安装的ffmpeg.js的worker文件存放在node_modules目录下，没有被暴露到React开发服务器的公开静态资源路径，开发服务器直接拦截了这个非法请求返回403

1. 移动worker文件到公开静态目录 #

找到node_modules/ffmpeg.js/目录下你需要的worker文件（比如你用到的ffmpeg-worker-webm.js），将它复制到你的React项目的public目录下：

• 如果你用的是CRA（create-react-app）创建的项目，直接放到根目录的public文件夹即可
• 如果你用的是Vite创建的React项目，也是放到根目录的public文件夹

如果后续需要处理其他封装格式，对应复制ffmpeg-worker-mp4.js等对应worker文件即可，不需要的文件不用复制避免占用资源

2. 修正worker引用路径 #

修改你的代码中Worker实例化的代码：

CRA项目写法： #

const worker = new Worker(process.env.PUBLIC_URL + "/ffmpeg-worker-webm.js");

Vite项目写法： #

const worker = new Worker(import.meta.env.BASE_URL + "ffmpeg-worker-webm.js");

3. 验证功能 #

重启开发服务器后再运行代码，就能正常触发onmessage回调，控制台会输出ffmpeg的版本信息，代表功能正常。

打包上线前确认public目录下的worker文件会被正常打包到输出目录的根路径，避免生产环境也出现找不到文件的问题。

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