如何在SvelteKit hook中正确删除全部或指定Cookie

原写法失效原因 #

你写的response.headers.set('Set-Cookie', "")不生效，核心是两个问题：

• 浏览器删除Cookie的逻辑不是接收空的Set-Cookie头，只有收到同名、path和domain完全匹配、过期时间设为过去时间点的Set-Cookie指令时，才会清除对应Cookie，空值头会被浏览器直接忽略。
• SvelteKit 框架内部会统一维护响应的Set-Cookie头，直接调用set方法覆盖头，要么会和框架内部的Cookie写入逻辑冲突被覆盖，要么会丢失框架正常需要返回的Cookie配置。

正确实现方式 #

SvelteKit 已经在event对象上封装了标准的cookies操作实例，不需要手动引入第三方库解析请求头里的Cookie字符串，也不需要手动拼接Set-Cookie头。

删除指定Cookie #

直接调用event.cookies.delete方法即可，注意参数要和当初写入Cookie时的path、domain配置完全一致，否则匹配不到目标Cookie：

export const handle: Handle = async ({ event, resolve }) => {
    const allCookieNames = Object.keys(event.cookies.getAll());
    const sessionTokenKey = allCookieNames.find(key => key.includes('abc'));
    if (sessionTokenKey) {
        event.cookies.delete(sessionTokenKey, {
            path: '/',
            // 如果写入Cookie时指定了domain，此处必须填写相同值
            // domain: 'your-site.com'
        })
    }

    const response = await resolve(event);
    return response
};

删除全部Cookie #

遍历当前请求携带的所有Cookie，逐个调用delete方法即可：

export const handle: Handle = async ({ event, resolve }) => {
    const allCookies = event.cookies.getAll();
    Object.keys(allCookies).forEach(cookieName => {
        event.cookies.delete(cookieName, {
            path: '/'
            // 对应补全写入时配置的domain等参数
        })
    })

    const response = await resolve(event);
    return response
};

注意事项 #

1. 删除Cookie时不需要重复配置HttpOnly、Secure、SameSite属性，只要path和domain和写入时完全匹配就能正常删除。
2. 不要直接通过response.headers.set/append手动修改Set-Cookie头做删除操作，SvelteKit会在resolve阶段把event.cookies上的所有操作统一合并到最终响应头，手动修改头很容易和框架内部逻辑冲突导致失效。

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