Sveltekit的handleFetch钩子未拦截fetch调用问题排查

算力阿峰

2026-7-20

排查SvelteKit handleFetch钩子未触发的问题

以下是几个常见的遗漏点，按优先级逐一排查：

确认使用SvelteKit封装的fetch
在+page.server.js的load函数中，必须调用SvelteKit提供的fetch（不能用Node.js原生global.fetch、node-fetch这类第三方库）。server端load函数中默认的fetch就是SvelteKit封装的版本，不要手动覆盖或替换它。
检查钩子文件的路径与导出格式
确保钩子文件路径为src/hooks.server.js（后缀必须是.server.js，不能写成hooks.js或hooks.client.js），且正确导出handleFetch函数：
```
export async function handleFetch({ request, fetch, event }) {
  console.log('handleFetch triggered');
  // 你的自定义逻辑
  return fetch(request);
}
```
注意函数参数结构不能写错，必须接收包含request、fetch、event的对象。
确认请求是实际网络请求
如果你的Go后端是通过内部路由地址调用（比如fetch('/api/xxx')），SvelteKit在server端会直接调用对应的endpoint处理函数，不会发起实际的HTTP请求，因此handleFetch不会触发。若目标是Go后端，确保请求的是外部URL（比如fetch('http://localhost:8080/api/xxx')）。
验证触发场景是否符合要求
handleFetch仅在服务器端执行的load/action函数或预渲染过程中触发。如果是客户端导航（比如点击页面内链接），+page.server.js的load不会运行，此时的fetch是客户端发起的，不会触发钩子。测试时需通过刷新页面或首次访问来触发server端load。
检查日志输出渠道
server端的console.log会输出到运行SvelteKit的终端窗口，而非浏览器控制台。确认你是在终端查看handleFetch的日志，而非浏览器开发者工具。