如何在SvelteKit中使用服务端Load函数读取静态HTML文件？

你在服务端Load函数里用fetch()读取本地文件的方式是错误的——fetch()是用来发起HTTP请求的，但src/assets目录下的文件并没有被映射为可访问的HTTP端点，自然会返回500错误。服务端环境可以直接通过文件系统读取本地文件，改用Node.js的文件系统模块即可解决问题。

具体解决方案步骤 #

1. 使用Node.js的fs/promises模块读取文件 #

在服务端代码中，直接通过文件系统API读取src/assets下的HTML文件，无需通过HTTP请求。

2. 拼接正确的绝对路径 #

服务端环境中，相对路径可能会出现解析错误，需要用项目根目录拼接出文件的绝对路径。可以用process.cwd()获取项目根目录，再拼接目标文件路径。

3. 添加参数校验与错误处理 #

必须对路由参数year做过滤，防止路径遍历攻击；同时处理文件不存在的情况，返回404状态。

完整代码示例 #

+page.server.ts #

import { error } from '@sveltejs/kit';
import fs from 'fs/promises';
import path from 'path';

export async function load({ params }) {
  // 校验年份参数，只允许4位数字
  const year = params.year;
  if (!/^\d{4}$/.test(year)) {
    throw error(400, 'Invalid year format');
  }

  try {
    // 拼接文件绝对路径
    const filePath = path.join(process.cwd(), 'src', 'assets', `${year}.html`);
    // 读取文件内容，指定utf8编码
    const htmlContent = await fs.readFile(filePath, 'utf8');
    return { htmlContent };
  } catch (err) {
    // 文件不存在时返回404
    if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
      throw error(404, 'Year not found');
    }
    // 其他未知错误返回500
    throw error(500, 'Failed to load HTML content');
  }
}

+page.svelte #

<script lang="ts">
  export let data;
</script>

{@html data.htmlContent}

关键注意事项 #

• 禁止用fetch()读取本地文件：服务端代码可以直接访问文件系统，HTTP请求方式不适用于这种场景。
• 路径安全：一定要校验year参数，避免攻击者通过构造特殊参数（如../）读取项目中的其他敏感文件。
• 编码设置：读取文件时指定utf8编码，确保HTML内容正确解析。

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