SvelteKit中如何为_app/immutable/workers资源配置COEP响应头？

成功构建SvelteKit应用后，执行npm run preview时无法加载http://localhost:4173/_app/immutable/workers/shout.wasm.worker-fuz9AyH7.js资源。浏览器控制台提示：站点启用了Cross-Origin Embedder Policy (COEP)，嵌入的iframe必须指定该策略，需为嵌入框架的HTML响应头添加Cross-Origin-Embedder-Policy: require-corp或Cross-Origin-Embedder-Policy: credentialless (Chrome > 96)。需求是为_app/immutable/workers路径下的静态资源配置Cross-Origin-Embedder-Policy: require-corp响应头。

当前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"
    } 
  },

你当前的配置只覆盖了开发服务器（vite dev）的响应头，但npm run preview启动的是预览服务器，需要单独配置预览服务器的中间件，同时针对目标路径做精准匹配：

• 修改自定义Vite插件，兼容开发与预览服务器
  给插件新增configurePreviewServer钩子，同时在中间件里判断请求路径，仅对_app/immutable/workers下的资源添加指定响应头：

const viteServerConfig = () => ({
    name: "add-headers",
    // 处理开发服务器
    configureServer: (server) => {
        server.middlewares.use((req, res, next) => {
            // 匹配目标worker资源路径
            if (req.url?.startsWith("/_app/immutable/workers/")) {
                res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
                res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
            }
            // 保留全局需要的跨域头
            res.setHeader("Access-Control-Allow-Origin", "*");
            res.setHeader("Access-Control-Allow-Methods", "GET");
            next();
        });
    },
    // 新增：处理预览服务器
    configurePreviewServer: (server) => {
        server.middlewares.use((req, res, next) => {
            if (req.url?.startsWith("/_app/immutable/workers/")) {
                res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
                res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
            }
            res.setHeader("Access-Control-Allow-Origin", "*");
            res.setHeader("Access-Control-Allow-Methods", "GET");
            next();
        });
    },
});

• 可选：配置预览服务器全局响应头
  如果需要给预览服务器的所有资源都加上COEP/COOP头，可以在Vite配置里添加preview字段：

export default defineConfig({
    // ... 其他原有配置
    preview: {
        headers: {
            "Cross-Origin-Embedder-Policy": "require-corp",
            "Cross-Origin-Opener-Policy": "same-origin",
        },
        host: '0.0.0.0',
    },
    // ... 其他原有配置
});

• 验证路径匹配
  确认生成的worker文件路径确实以/_app/immutable/workers/开头，如果实际路径有变动，直接调整判断条件里的字符串即可。

内容的提问来源于stack exchange，提问作者jh314