Fastify部署Vercel后__vercel_live_token Cookie跨域报错排查

使用Fastify开发后端并部署到Vercel时，遇到以下错误：

Cookie “__vercel_live_token” has been rejected because it is in a cross-site context and its “SameSite” is “Lax” or “Strict”.

已通过以下代码配置Cookie，但错误依然存在：

import { errorHandler } from '@/middlewares/error-handler';
import Fastify from 'fastify';
import cors from '@fastify/cors'
import cookie from '@fastify/cookie'
import router from '@/router';


const fastify = Fastify({
    logger: true,
});

fastify.register(cors)
fastify.register(cookie, {
    parseOptions: {
        httpOnly: true,
        sameSite: 'none',
        secure: true
    }
})


fastify.setErrorHandler((error, request, reply) => {
    errorHandler(error, request, reply)
})

fastify.register(router, {prefix: '/api'})

try {
    await fastify.listen({ port: 5000 });
    console.log(`Server listening at http://localhost:5000`);
} catch (err) {
    fastify.log.error(err);
    process.exit(1);
}

原因分析与解决方案 #

• __vercel_live_token是Vercel为预览部署的实时协作功能自动生成的系统Cookie，并非你的业务代码所设置。你配置的@fastify/cookie插件只能管控自己业务代码创建的Cookie，无法修改Vercel系统级Cookie的属性。
• 该Token默认SameSite属性为Lax或Strict，当前后端处于跨域场景时，浏览器的Cookie安全策略会拦截这个不符合跨域要求的Cookie。

针对该问题的处理方式：

1. 本地/开发场景：这个警告仅影响Vercel预览的实时功能，不会干扰业务逻辑运行，可以直接忽略。
2. 生产部署场景：生产环境下Vercel不会生成该Token，因此不会出现这个错误。
3. 预览环境需修复：目前Vercel官方未开放修改该TokenSameSite属性的配置项，可尝试将预览分支部署到自定义域名下，让前后端处于同域环境，从而避免跨域Cookie拦截问题。

内容的提问来源于stack exchange，提问作者Павел Хорольський