Fastify setCookie无法在Next.js前端场景下设置Cookie问题

可能的问题及解决步骤 #

1. 跨域(CORS)配置缺失 #

Fastify后端必须配置CORS并允许携带凭证，否则浏览器会拦截跨域请求返回的Cookie：

// Fastify CORS配置示例
fastify.register(require('@fastify/cors'), {
  origin: 'http://localhost:3000', // 替换为你的Next.js前端地址
  credentials: true, // 必须开启，允许请求携带Cookie
});

2. 前端请求未携带凭证 #

前端发起请求时，必须明确设置携带凭证的参数，否则后端返回的Cookie不会被浏览器存储：

// fetch请求示例
fetch('http://localhost:3001/api/vote-on-poll', {
  method: 'POST',
  credentials: 'include', // 关键配置：携带Cookie
  // 其他请求体、头信息配置
});

// axios请求示例
axios.post('http://localhost:3001/api/vote-on-poll', requestData, {
  withCredentials: true,
});

3. Cookie签名配置未完成 #

代码中设置了signed: true，但Fastify需要提前配置签名密钥，否则无法生成有效签名的Cookie，导致浏览器拒绝存储：

// Fastify实例初始化时配置签名密钥
const fastify = require('fastify')({
  cookieSecret: 'your-strong-random-secret', // 替换为自定义的强密钥
});

4. 错误的Cookie查看方式 #

因为设置了httpOnly: true，这个Cookie无法通过document.cookie获取，需要在浏览器开发者工具的「Application」标签 →「Cookies」下对应域名中查看。

5. 域名/端口匹配问题 #

如果前后端是不同域名，需要在Cookie配置中显式设置domain为父域名（比如.example.com），同时确保CORS的origin配置与前端域名一致；如果是同域名不同端口，通常无需额外设置domain，但要保证请求地址的域名端口与后端一致。

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