I have a small react app with a node.js backend (monorepo). The client is using @ffmpeg/ffmpeg, and all works fine locally, but when deployed to Heroku I’m getting the error
ReferenceError: SharedArrayBuffer is not defined. This happens when I run
ffmpeg.load(). Note that I am only using ffmpeg on the client in the React app.
What I have done so far:
- Ensured that my deployed app is using https
- Added these lines in
app.use(located in the client directory). See this answer for context
response.setHeader('Cross-Origin-Opener-Policy', 'same-origin'); response.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
- Registered for an origin trial with chrome. This actually worked, but I’d prefer a more permanent solution that works across browsers.
- Tested debugging
crossOriginIsolated, and verifying that it is
falseon my deployed site.
It seems like something is wrong with my Cross-Origin config, or maybe it’s just not being applied. Any help would be appreciated.
This was a silly mistake on my part. The Cross-Origin-* headers mentioned in the question were correct, they just had to be in index.js on the backend, not the client.
Answered By – Flobbinhood
Answer Checked By – Dawn Plyler (AngularFixing Volunteer)