I've successfully built a SvelteKit app, but when I try to run npm rum preview
, I see that the following asset was unable to be loaded:
http://localhost:4173/_app/immutable/workers/shout.wasm.worker-fuz9AyH7.js.
The browser console says:
Because your site has the Cross-Origin Embedder Policy (COEP) enabled, each embedded iframe must also specify this policy. This behavior protects private data from being exposed to untrusted third party sites.To solve this, add one of following to the embedded frame’s HTML response header:Cross-Origin-Embedder-Policy: require-corpCross-Origin-Embedder-Policy: credentialless (Chrome > 96)
How do I configure the static assets served from "_app/immutable/workers" to have the Cross-Origin-Embedder-Policy: require-corp
headers?
Current setup of vite.config.ts
const viteServerConfig = () => ({ name: "add-headers", configureServer: (server) => { server.middlewares.use((req, res, next) => { res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Methods", "GET"); res.setHeader("Cross-Origin-Opener-Policy", "same-origin"); res.setHeader("Cross-Origin-Embedder-Policy", "require-corp"); next(); }); },});export default defineConfig({ plugins: [ sveltekit(), Icons({ compiler: "svelte", }), viteServerConfig(), ], server: { open: "/", headers: {"Cross-Origin-Embedder-Policy": "require-corp","Cross-Origin-Opener-Policy": "same-origin", }, host: '0.0.0.0', }, worker: { format: "es", }, build: { outDir: "dist", target: "ES2022" } },