Fastify后端与Svelte Kit前端Cookie传输失败问题求助

问题背景 #

使用Fastify作为后端、SvelteKit作为前端开发Web应用，已配置@fastify/cookie和@fastify/cors插件，但客户端完成登录请求后，后续请求未正确携带服务器返回的Cookie。服务器响应头已明确返回Set-Cookie字段，但浏览器网络标签中无Cookie发送记录。

服务器核心配置 #

import Fastify from "fastify";
import cors from "@fastify/cors";
import fastifyCookie from "@fastify/cookie";

const fastify = Fastify();

fastify.register(cors, {
  origin: process.env.CORS_ORIGIN,// 实际值：http://localhost:5173
  credentials: true,
  allowedHeaders: ["Content-Type", "Authorization"],
  maxAge: 600,
  exposedHeaders: ["*", "Authorization"],
});

fastify.register(fastifyCookie, { secret: process.env.COOKIE_SECRET /* 实际值：cloudhub */ });

// ...

客户端请求代码 #

// ....

async onSubmit(values, helpers) {
  const request = await fetch(`http://127.0.0.1:7878/api/auth/login`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(values),
  });

  //....
}

关键网络信息 #

服务器响应头已返回Cookie：

set-cookie: accessToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; Path=/; Expires=Mon, 19 Jun 2023 23:00:49 GMT; HttpOnly; SameSite=None

但后续请求的Request Headers中无Cookie字段。

问题诊断与解决方案 #

1. 客户端请求未开启凭证携带 #

fetch API默认不会在跨域请求中携带Cookie，必须显式添加credentials: 'include'参数：

async onSubmit(values, helpers) {
  const request = await fetch(`http://127.0.0.1:7878/api/auth/login`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    credentials: 'include', // 核心：允许跨域携带Cookie
    body: JSON.stringify(values),
  });

  //....
}

2. 跨域源不匹配 #

服务器CORS配置的origin是http://localhost:5173，但客户端请求的后端地址是http://127.0.0.1:7878——localhost和127.0.0.1在浏览器中属于不同的跨域源，会导致Cookie被拦截。

解决方式：

• 统一前后端域名：前端请求后端时使用http://localhost:7878，而非127.0.0.1
• 或修改Fastify的CORS配置，同时允许http://localhost:5173和http://127.0.0.1:5173两个源（推荐优先统一域名）

3. SameSite=None缺少Secure属性 #

当Cookie设置SameSite=None时，浏览器强制要求同时添加Secure属性（仅在HTTPS环境生效）。本地开发使用HTTP时，浏览器会拒绝存储该Cookie。

解决方式：

• 本地开发时，临时将SameSite改为Lax：

  // 服务器设置Cookie的代码调整
  fastify.setCookie('accessToken', token, {
    path: '/',
    expires: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000),
    httpOnly: true,
    sameSite: 'lax', // 适配本地HTTP环境
    secure: process.env.NODE_ENV === 'production' // 生产环境开启HTTPS后启用
  });
  

• 或搭建本地HTTPS环境（如使用mkcert生成证书），保留SameSite=None和Secure属性

4. 简化CORS配置（非必须但优化） #

exposedHeaders无需包含Set-Cookie，浏览器会自动处理该字段；当前配置的"*"可正常使用，但建议只保留必要的暴露字段。

验证步骤 #

1. 给客户端fetch请求添加credentials: 'include'
2. 统一前后端域名（前端用localhost请求后端localhost）
3. 调整Cookie的SameSite属性适配本地环境
4. 重新发起请求，检查浏览器Application标签的Cookie存储，以及后续请求的Request Headers是否包含Cookie字段

内容的提问来源于stack exchange，提问作者Michael-Liendo