SvelteKit设置Session Cookie后重定向，验证失败如何解决？

你遇到的问题核心并非cookies.set()未执行完成，而是SvelteKit的客户端导航机制导致重定向后的请求未携带刚设置的Cookie。以下是几种可行的解决方法：

方案一：触发浏览器硬跳转 #

放弃服务器端的throw redirect，改为让客户端通过window.location.href完成跳转，确保浏览器完整处理Cookie后发起新请求：

1. 在登录逻辑所在的+page.server.ts的action中，返回跳转目标地址：

export const actions = {
  default: async ({ request, cookies }) => {
    // 省略登录验证、生成token的逻辑
    const token = '生成的会话token';
    const user = { login: '用户登录名' };

    cookies.set('session', token, {
      path: '/',
      httpOnly: true,
      sameSite: 'strict',
      maxAge: 60 * 60 * 24 * 30 // 30天
    });

    // 返回跳转指令，而非抛出重定向
    return { redirectTo: `/${user.login}` };
  }
};

2. 在登录页面的+page.svelte中，监听返回的跳转指令并执行硬跳转：

<script>
  import { page } from '$app/stores';

  $: if ($page.form?.redirectTo) {
    window.location.href = $page.form.redirectTo;
  }
</script>

<!-- 登录表单 -->
<form method="POST">
  <!-- 表单输入项 -->
  <button type="submit">登录</button>
</form>

方案二：全局配置客户端Fetch的Credentials #

SvelteKit的客户端导航默认使用fetch发起请求，可全局配置credentials: 'include'，确保请求携带Cookie：

在项目根目录创建src/hooks.client.ts，添加以下代码：

const originalFetch = window.fetch;

window.fetch = async (url, options) => {
  return originalFetch(url, {
    ...options,
    credentials: 'include'
  });
};

此方法会让所有客户端Fetch请求携带Cookie，需注意安全风险（仅在同域场景下使用）。

方案三：排查Cookie参数与请求流程 #

1. 打开浏览器开发者工具的Network面板，检查登录请求的响应头是否包含Set-Cookie字段，确认Cookie参数（path、sameSite等）配置正确。
2. 查看重定向后的目标页面请求头，确认Cookie字段是否携带了session值。若未携带，检查是否为跨站场景（sameSite: strict会限制跨站请求携带Cookie）。

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