SvelteKit中load函数内请求无法存储Cookie的问题

核心原因是请求发起的环境完全不同：

1. 服务器端请求 vs 客户端请求 #

• 在+layout.server.ts的LayoutServerLoad里执行的fetch是服务器端发起的请求：这个请求是你的SvelteKit服务器向后端服务器发送的，浏览器全程不知道这个请求的存在。后端返回的Set-Cookie头部是发给SvelteKit服务器的，而非用户的浏览器，所以浏览器不会存储这个Cookie。
• 在+layout.svelte的onMount里发起的请求是浏览器（客户端）直接发起的：后端的响应直接返回给浏览器，浏览器会按照HTTP规范自动处理并存储Set-Cookie里的内容。

2. 服务器端请求的Cookie无法自动传递给浏览器 #

服务器端fetch拿到的Set-Cookie只会存在服务器的请求上下文里，不会自动转发给用户浏览器。如果想要让浏览器拿到这个Cookie，需要手动把服务器端响应的Set-Cookie头部添加到SvelteKit返回给浏览器的响应头中，但这种操作有严格限制：

• Cookie的属性（比如Domain、SameSite、Secure）必须和当前站点匹配，否则浏览器会拒绝存储。
• 如果后端返回多个Set-Cookie，需要逐个提取并添加到响应头。

解决办法 #

办法一：保持客户端发起请求（推荐） #

直接沿用你在onMount里发起请求的方式，这是浏览器原生处理Cookie的场景，无需额外处理，兼容性最好。

办法二：手动转发Set-Cookie到浏览器响应头 #

如果一定要在服务器端处理请求，可以提取后端响应的Set-Cookie，通过SvelteKit的setHeaders方法添加到返回给浏览器的响应中：

import type { LayoutServerLoad } from "./$types";
import { backendUrl } from "$lib/config";

export const trailingSlash = "always";

export const load: LayoutServerLoad = async ({ locals, url, fetch, setHeaders }) => {
  const affiliate_id = url.searchParams.get("affiliate_id");
  if (affiliate_id) {
    const headers = {
      "Content-Type": "application/json",
      "X-CSRFToken": locals.csrfToken,
    };

    try {
      const response = await fetch(`${backendUrl}/shop/basket/`, { 
        method: "POST", 
        credentials: "include", 
        headers, 
        body: JSON.stringify({ affiliate_id }) 
      });
      
      // 提取所有Set-Cookie头部
      const setCookies = response.headers.getAll('Set-Cookie');
      if (setCookies.length > 0) {
        // 逐个添加到响应头（Set-Cookie允许多个值）
        setCookies.forEach(cookie => {
          setHeaders({
            'Set-Cookie': cookie
          });
        });
      }
    } catch (error) {
      console.error("Error storing affiliate_id: ", error);
    }
  }

  return {
    // 你的返回数据
  };
};

注意：这种方式需要确保后端设置的Cookie属性符合当前站点的要求，比如Domain要和你的SvelteKit站点域名一致，否则浏览器会忽略这个Cookie。

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