如何在SvelteKit adapter-node中为静态资源添加CORS响应头

我使用SvelteKit adapter-node构建应用，希望为存放在{project root}/static目录下的脚本资源添加Access-Control-Allow-Origin响应头，尝试了以下三种方案均未生效：

• 方案1 在svelte.config.js中添加cors配置项
  该配置在开发环境（执行npm run dev）下生效，但在生产环境（执行npm run build && npm run preview）下不生效。Vite的cors选项默认即为开启状态，该配置本身只作用于开发服务器，对生产构建产物无实际作用。

  import adapter from '@sveltejs/adapter-node';
  import preprocess from 'svelte-preprocess';
  
  /** @type {import('@sveltejs/kit').Config} */
  const config = {
      preprocess: [
          preprocess({
              postcss: true,
          }),
      ],
  
      kit: {
          adapter: adapter(),
          vite: () => ({
              server: {
                  fs: {
                      allow: ['./static']
                  },
                  cors: true
              }
          })
      }
  };
  
  export default config;
  

• 方案2 在svelte.config.js中通过自定义Vite插件添加响应头
  该方案同样仅在开发环境生效，生产环境无效。

  import adapter from '@sveltejs/adapter-node';
  import preprocess from 'svelte-preprocess';
  
  /** @type {import('@sveltejs/kit').Config} */
  const config = {
      preprocess: [
          preprocess({
              postcss: true,
          }),
      ],
  
      kit: {
          adapter: adapter(),
          vite: () => ({
              server: {
                  fs: {
                      allow: ['./static']
                  },
              },
              plugins: [
                  {
                      name: 'configure-response-headers',
                      configureServer: (server) => {
                          server.middlewares.use((incomingMessage, serverReponse, next) => {
                              serverReponse.setHeader('Access-Control-Allow-Origin', '*');
                              next();
                          });
                      }
                  }
              ]
          })
      }
  };
  
  export default config;
  

• 方案3 在hook.js中添加响应头逻辑
  该方案完全不生效，原因是静态资源请求不会经过SvelteKit的hook处理链路。

  /** @type {import('@sveltejs/kit').Handle} */
  export async function handle({ event, resolve }) {
      const response = await resolve(event);
      response.headers.set('Access-Control-Allow-Origin', '*');
      return response;
  }
  

之前尝试的方案失效核心逻辑很明确：

1. 所有Vite层的配置（包括cors开关、自定义Vite插件）只作用于Vite启动的开发服务，执行npm run build后产出的生产代码完全脱离Vite环境运行，这部分配置不会被带入生产环境。
2. SvelteKit的handle钩子只会处理经过SvelteKit路由系统的请求，/static路径下的静态资源在到达路由层之前，就被adapter-node内置的静态资源中间件直接返回响应，钩子逻辑根本不会触发。

方案1：自定义adapter-node服务入口（应用层实现，无需依赖反向代理） #

adapter-node支持自定义服务入口，你可以在静态资源处理逻辑前手动添加CORS响应头，该方案在生产环境完全生效。

1. 首先修改svelte.config.js中的adapter配置，指定自定义入口路径：

import adapter from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [preprocess({ postcss: true })],
    kit: {
        adapter: adapter({
            entryPoint: './src/server.js'
        })
    }
};

export default config;

2. 在src目录下创建server.js作为自定义服务入口，手动添加CORS头逻辑：

import { createServer } from 'node:http';
import { handler } from './handler.js';

const server = createServer((req, res) => {
    // 匹配静态资源路径，提前设置CORS头
    if (req.url.startsWith('/static/')) {
        res.setHeader('Access-Control-Allow-Origin', '*');
    }
    // 交给SvelteKit内置逻辑处理后续请求
    handler(req, res);
});

server.listen(3000, () => {
    console.log('服务启动在 3000 端口');
});

如果项目里已经用了Express/Polka等web框架，也可以用框架的中间件机制实现同样的头设置逻辑，只要保证头设置逻辑在静态资源响应返回前执行即可。

方案2：反向代理层配置（生产部署最推荐，零应用代码侵入） #

如果你的服务前面挂了Nginx、Caddy等反向代理，直接在代理层给/static路径的响应加CORS头即可，不需要修改任何应用代码。以Nginx为例：

location /static/ {
    # 新增CORS头配置
    add_header Access-Control-Allow-Origin *;
    # 原有静态资源配置，比如根路径、缓存策略等
    root /path/to/your/build/client;
    expires 7d;
}

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