SvelteKit hooks中externalFetch函数始终未被调用的问题求解

安全阿岳

2026-9-29

externalFetch 钩子未触发常见原因及修复方案

1. 钩子放置位置错误

externalFetch（旧版本SvelteKit）/handleFetch（1.0+版本SvelteKit）仅在放置于src/hooks.server.js（或对应.ts后缀文件）时才会被框架自动加载，放在其他文件中不会生效。

2. 版本不兼容导致钩子名失效

SvelteKit 1.0正式版发布后，externalFetch钩子已被正式重命名为handleFetch，如果你的项目依赖版本大于等于1.0，继续使用externalFetch作为函数名不会被触发，需要替换函数名。

3. 调用场景不匹配

该钩子仅能拦截服务端环境发起的、指向外部域名的fetch请求，以下场景不会触发：

客户端侧（如页面onMount生命周期、客户端交互事件中）直接发起的fetch请求
服务端发起的调用本站点内部接口的fetch请求

4. 原有代码逻辑错误

你当前的代码直接通过下标赋值修改Request对象的headers属性，这一写法不符合Fetch API规范：Request实例的headers是只读的Headers对象，需要先克隆实例后调用headers.set方法修改头信息，修正后的代码如下：

// SvelteKit 1.0+ 版本写法，放置于src/hooks.server.js
export async function handleFetch({ request, fetch }) {
    const modifiedRequest = new Request(request);
    modifiedRequest.headers.set('authorization', 'HMAC 12.33');
    console.log('hook headers', modifiedRequest);
    return fetch(modifiedRequest);
}

// SvelteKit 1.0之前旧版本写法，放置于src/hooks.js
export async function externalFetch(request) {
    const modifiedRequest = new Request(request);
    modifiedRequest.headers.set('authorization', 'HMAC 12.33');
    console.log('hook headers', modifiedRequest);
    return fetch(modifiedRequest);
}