SvelteKit中表单动作内cookies.set()无法生效问题

问题场景 #

在SvelteKit中通过表单动作实现用户登录，已确认signIn方法能正确返回JWT令牌，但执行cookies.set()后，开发者工具中看不到对应的Cookie，无法建立用户认证会话。

相关代码 #

+page.svelte #

<form method="POST" action="?/signIn">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <button type="submit">Submit</button>
</form>

+page.server.js #

import { fail, redirect } from "@sveltejs/kit";
import { signIn } from "$lib/server/database";

export const actions = {
  signIn: async ({ cookies, request }) => {
    const data = await request.formData();

    const name = data.get("name");
    const password = data.get("password");

    if (!name || !password) {
      return fail(400);
    }

    try {
      cookies.set("jwt", await signIn(name, password));
    } catch (error) {
      return fail(400);
    }

    throw redirect(303, "/");
  },
};

排查与解决方法 #

1. 显式配置Cookie核心参数 #

SvelteKit的cookies.set()默认path为当前路由路径，跳转至根路径/后，Cookie会因路径不匹配无法被读取。必须显式设置全局路径及安全参数：

cookies.set("jwt", await signIn(name, password), {
  path: "/", // 确保全站路由可访问该Cookie
  httpOnly: true, // 禁止前端JS读取，防范XSS攻击
  secure: process.env.NODE_ENV === "production", // 仅生产环境启用HTTPS传输
  sameSite: "strict", // 防范CSRF攻击
  maxAge: 60 * 60 * 24 * 7 // 设置有效期为7天，可按需调整
});

2. 验证Cookie值的有效性 #

先替换JWT令牌为测试值，确认Cookie基础设置是否正常：

cookies.set("jwt", "test-valid-token", { path: "/" });

如果测试值能在开发者工具Application > Cookies中看到，说明signIn返回的令牌可能存在格式问题（如包含非法字符），需检查令牌生成逻辑。

3. 适配开发环境HTTPS设置 #

开发环境下localhost默认未启用HTTPS，若强制设置secure: true会导致Cookie被浏览器拒绝。必须通过环境变量动态控制该参数，如上述代码所示。

4. 检查SvelteKit版本兼容性 #

旧版SvelteKit的cookies API可能存在bug，建议更新至最新稳定版：

npm update @sveltejs/kit

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