Svelte/SvelteKit如何配置crossOriginIsolated响应头

这个报错的核心原因是使用SharedArrayBuffer要求页面必须处于跨域隔离状态，必须给所有页面响应返回两个强制头：

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

在SvelteKit中可以按以下场景选择配置方式：

通用全局配置（适配开发环境+绝大多数生产部署场景） #

在项目根目录的src文件夹下找到/新建hooks.server.ts文件，写入如下配置，SvelteKit会在每次返回响应时自动注入对应头：

import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
  const response = await resolve(event);
  response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
  response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
  return response;
};

该配置对npm run dev启动的本地开发服务、以及使用任意官方适配器（Node、Vercel、Netlify、Cloudflare Pages等）部署的生产环境均生效。

Vite开发服务补充配置 #

如果完成上述配置后开发环境依旧提示跨域隔离未生效，可以直接修改项目根目录的vite.config.ts，给Vite内置开发服务直接加响应头：

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

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp'
    }
  }
});

纯静态站点部署注意事项 #

如果你使用adapter-static导出纯静态资源部署到Nginx、对象存储等静态托管服务，SvelteKit的服务端钩子不会运行，需要直接在托管服务侧配置上述两个响应头：

• Nginx可以在站点配置的server块中添加add_header指令
• 云托管/对象存储平台一般在控制台的站点设置中提供自定义响应头配置入口

配置验证 #

配置完成后重启服务，打开浏览器开发者工具控制台，输入self.crossOriginIsolated执行，如果返回true即表示配置生效，Worker中传递SharedArrayBuffer的报错会自动消失。

注意：配置Cross-Origin-Embedder-Policy: require-corp后，页面加载的所有跨域资源（图片、脚本、字体、iframe等）要么部署在同域下，要么资源本身返回合法的Cross-Origin-Resource-Policy响应头，否则会被浏览器拦截加载。

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