Reputation: 23
I've been developing a website using Express for the backend and React for the frontend. I've come across the issue where my application won't work on Firefox due to this error: 'ReferenceError: SharedArrayBuffer is not defined.' After searching a bit online, it appears to be related to CORS. I also noticed that Chrome issues a warning about the use of SharedArrayBuffer.
So, I read that I need to set these headers: Cross-Origin-Opener-Policy: same-origin
and Cross-Origin-Embedder-Policy: require-corp
.
But I am not sure how to do that. On my backend, I've been using the 'cors' package to set my CORS headers and options like this:
const corsMiddleware = cors({
credentials: true,
origin: allowedCorsOrigins
});
app.use(corsMiddleware);
app.options('*', corsMiddleware);
I've also tried using this method, but it doesn't appear to work either:
app.use((req, res, next) => {
res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
next();
});
Am I totally missing something or misunderstanding? It is my first time developing a web application, and I am kind of lost at this point. Any help would be greatly appreciated.
Upvotes: 1
Views: 817