SvelteKit中如何从fetch响应Header提取Cookie？

问题场景 #

你在SvelteKit的src/root/+page.js中通过fetch请求api/getacookie，响应头包含Cookie，但无法提取其值，代码如下：

// +page.js
let url = "api/getacookie"

/** @type {import('./$types').PageLoad} */
export const load = async ({ fetch }) => {

    let response = await fetch(url) 
    console.log("see if response has set-cookie header :", response.headers)
 
    let aboutcookie = await response.json()
    // reponse has the cookie in the headers. How to get the cookie value?

    return { aboutcookie }
}

解决方案 #

1. 直接获取Set-Cookie头内容

在服务器端执行的load函数中（默认SvelteKit的load函数在服务器端运行），可以直接通过response.headers.get('Set-Cookie')获取完整的Cookie字符串：

const setCookieHeader = response.headers.get('Set-Cookie');
console.log('完整Set-Cookie内容:', setCookieHeader);

2. 解析提取特定Cookie值

Set-Cookie的格式通常为cookieName=cookieValue; Path=/; HttpOnly，如果需要提取特定名称的Cookie值，需要解析该字符串：

// +page.js
const url = "api/getacookie"

/** @type {import('./$types').PageLoad} */
export const load = async ({ fetch }) => {
    const response = await fetch(url);
    const setCookieHeader = response.headers.get('Set-Cookie');
    
    let targetCookie = null;
    if (setCookieHeader) {
        // 处理多个Cookie的情况（多个Cookie用逗号分隔）
        const cookieEntries = setCookieHeader.split(',');
        for (const entry of cookieEntries) {
            // 拆分键值对和属性部分
            const [cookiePair] = entry.split(';').map(item => item.trim());
            const [name, value] = cookiePair.split('=');
            // 替换为你要提取的Cookie名称
            if (name === 'your-target-cookie') {
                targetCookie = value;
                break;
            }
        }
    }

    console.log('提取到的Cookie值:', targetCookie);
    const aboutcookie = await response.json();
    return { aboutcookie, targetCookie };
}

关键注意点 #

• 如果你的load函数设置为客户端执行（添加export const ssr = false），浏览器出于安全限制会禁止JS读取Set-Cookie头，此时Cookie会自动被浏览器存储，后续请求会自动携带该Cookie，无需手动提取。
• 若响应包含多个Cookie，需用逗号分隔后逐个解析。

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