CODEWITHSUNDEEP
corssveltesveltekit
Gum Rick
Gum Rick

Reputation: 255

Set crossOriginIsolated Svelte and SvelteKit

I'm new in Svelte and SvelteKit and I'm getting this error when trying to execute a worker:

Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': SharedArrayBuffer transfer requires self.crossOriginIsolated.

I know I need to set the headers (I'm moving from React to Svelte), but how/where do I set the headers?

Upvotes: 3

Views: 2557

Answers (2)

Tablet1 User1
Tablet1 User1

Reputation: 373

As of June 2023, the Svelte-Kit config syntax seems to have changed and Gum Rick's solution doesn't work verbatim.

As an alternate, the Vite plugin can be defined and configured in vite.config.js:

// vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

/** @type {import('vite').Plugin} */
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(), viteServerConfig()]
});

Upvotes: 3

Gum Rick
Gum Rick

Reputation: 255

So the solution was setting Vite's "configureServer" in the "svelte.config.js" (here's a link to Vite documentation). The implementation looks like this:

import adapter from '@sveltejs/adapter-auto';

/** @type {import('vite').Plugin} */
const viteServerConfig = {
    name: 'log-request-middleware',
    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();
        });
    }
};

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(),
        vite: {
            plugins: [viteServerConfig]
        }
    }
};

export default config;

Upvotes: 4

Related Questions