设置 crossOriginIsolated Svelte 和 SvelteKit

Question

我是 Svelte 和 SvelteKit 的新手，在尝试执行工作程序时遇到此错误：

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

我知道我需要设置标题（我正在从 React 转向 Svelte），但是如何/在哪里设置标题？

Answer 1

所以解决方案是在“svelte.config.js”中设置Vite的“configureServer”（这里是Vite文档的链接）。实现如下所示：

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;

Answer 2

截至 2023 年 6 月，Svelte-Kit 配置语法似乎已发生变化，Gum Rick 的解决方案无法逐字工作。

作为替代方案，可以在

vite.config.js

:

中定义和配置 Vite 插件

// 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()]
});