如何让SvelteKit在SSR时调用已关联的Express后端？

常见原因与对应解法 #

1. 避免用外部域名/端口发起内部请求 #

SSR在服务器端执行，若代码里写http://localhost:3000/api/xxx这类外部地址，容易出现端口冲突、网络隔离（比如Docker环境）或循环请求问题。直接用内部路由逻辑或相对路径配合Express上下文处理更稳妥：

• 在load函数里，通过platform参数拿到Express请求上下文，直接调用后端路由的处理函数，无需发HTTP请求：

  // +page.server.js
  export async function load({ platform }) {
    // 假设后端有处理用户数据的getUsers方法
    const users = await platform.api.getUsers();
    return { users };
  }
  

• 或者在自定义Express服务器中，先挂载API路由，再挂载SvelteKit handler，SSR时用相对路径/api/xxx发起请求，让Express直接内部转发。

2. 调整Express中间件顺序 #

必须把你的API路由挂载在SvelteKit handler之前，这样SSR发起的内部请求会先匹配到API路由，而不是被SvelteKit直接接管：

// server.js（自定义Express服务器）
import express from 'express';
import { handler } from './build/handler.js';

const app = express();

// 先挂载API路由
app.use('/api', yourApiRouter);

// 再挂载SvelteKit的handler
app.use(handler);

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

3. 重写SSR时的fetch方法 #

SvelteKit默认的SSRfetch模拟浏览器行为，请求同域后端时需确保使用服务器端上下文。可在hooks.server.js中重写：

// hooks.server.js
export async function handle({ event, resolve }) {
  event.fetch = async (url, options) => {
    if (url.startsWith('/api')) {
      // 直接发起内部HTTP请求，绕开外部网络
      const http = await import('http');
      return new Promise((resolveFetch, rejectFetch) => {
        const req = http.request({
          hostname: 'localhost',
          port: 3000,
          path: url,
          method: options?.method || 'GET',
          headers: options?.headers
        }, (res) => {
          let data = '';
          res.on('data', (chunk) => data += chunk);
          res.on('end', () => {
            resolveFetch(new Response(data, {
              status: res.statusCode,
              headers: res.headers
            }));
          });
        });
        req.on('error', rejectFetch);
        if (options?.body) req.write(options.body);
        req.end();
      });
    }
    return fetch(url, options);
  };

  return resolve(event);
}

4. 调整CORS配置 #

如果Express后端开了CORS，SSR的服务器端请求可能因CORS规则被拦截。可在Express中判断请求是否来自内部，跳过CORS检查：

// API路由文件
import cors from 'cors';

const corsOptions = {
  origin: (origin, callback) => {
    // 服务器端请求的origin为undefined，直接放行
    if (!origin || origin === 'http://localhost:3000') {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  }
};

app.use(cors(corsOptions));

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