Next.js+Next-auth部署Vercel遇431及JSON解析问题求助

问题背景 #

在使用 Next-auth 的 Next.js 应用中，部署到 Vercel 后遇到以下问题：

• 部分用户无法登录，网络报错431: REQUEST_HEADER_FIELDS_TOO_LARGE，提示 JWT Cookie 过大。本地通过设置NODE_OPTIONS='--max-http-header-size=24576 next dev'解决了开发环境问题，但部署到 Vercel 后，即使设置NODE_OPTIONS='--max-http-header-size=24576 next build'问题仍存在。
• 修改配置后，部分用户登录时出现Error Unexpected token < in JSON at position 0错误，该错误仅在 Vercel 出现，本地及其他部署环境无此问题。

相关 JWT 配置代码 #

jwt: {
    secret: process.env.JWT_SECRET,
    encode: async ({ secret, token }) => {
        const payload = { id: token?.id };
        const encodedToken = jwt.sign(payload, secret, { algorithm: 'HS256' });
        return encodedToken;
    },
    decode: async ({ secret, token }) => {
        if (!token) {
            throw new Error('Token is undefined');
        }
        try {
            const decodedToken = jwt.verify(token, secret, { algorithms: ['HS256'] });
            return decodedToken;
        } catch (error) {
            throw new Error('Failed to decode token');
        }
    },
},

问题解答 #

1. 如何在不影响安全性与功能的前提下，确保不同用户的 JWT Cookie 大小可控？ #

• 精简 JWT Payload：目前你只存了id，这是合理的，但要确认 Next-auth 是否默认注入了其他冗余字段——检查token参数的实际内容，避免无意识携带不必要的数据。
• 切换为数据库会话：放弃 JWT 模式，改用数据库存储会话。Next-auth 支持将会话信息存在数据库，Cookie 中仅存短小的会话 ID，彻底解决 Cookie 过大问题。只需在配置中添加session: { strategy: "database" }，并配置对应数据库适配器（如 Prisma）。
• 启用 JWT 压缩：Next-auth v4.22.0 及以上版本支持 JWT 压缩，在jwt配置中添加compression: true，通过 gzip 压缩大幅减少 Token 体积。
• 优化 Cookie 属性：合理设置maxAge避免长期存储冗余 Cookie；同时保持httpOnly: true、secure: process.env.NODE_ENV === "production"等安全属性，不影响安全性的前提下压缩 Cookie 整体占用。

2. 为何仅部分用户会出现 431 错误，即使数据库中存储的数据存在差异？ #

• 用户数据体积差异：部分用户的认证 Token 可能携带了更多额外数据，比如 OAuth 提供商返回的扩展用户信息、自定义的角色/权限列表等——即使你自定义了encode，也要确认token参数是否包含来自上游的冗余字段，导致 Token 体积超标。
• 浏览器 Cookie 累积：部分用户浏览器中可能累积了多个同域名 Cookie，加上 JWT Cookie 后总大小超过了 Vercel 网关或浏览器的请求头上限（通常为 4KB），触发报错。
• Vercel 网关限制：Vercel 边缘网络对请求头总大小有独立限制，Node.js 层面的max-http-header-size配置不会作用于边缘层，因此大 Cookie 仍会被拦截。

3. 针对仅在 Vercel 出现的Unexpected token < in JSON at position 0错误，应如何解决？ #

• 检查错误响应格式：该错误是因为请求期望返回 JSON，但实际返回了 HTML（比如 Vercel 的默认 404/500 错误页）。排查登录流程中是否有请求失败后跳转到 HTML 页面，而前端仍尝试解析 JSON。
• 排查边缘函数冲突：Next-auth 在 Vercel 上默认使用边缘函数，检查next.config.js中experimental.appDir、runtime: "edge"等配置是否干扰了认证接口的响应格式。
• 确认路由配置：检查 Next-auth 默认路由/api/auth/*是否被自定义路由或重写规则拦截，导致请求返回 HTML 而非 JSON。
• 查看 Vercel 函数日志：在 Vercel 控制台找到触发错误的具体请求，检查响应内容是否为 HTML，定位哪个环节返回了非 JSON 数据。

Next-auth 在 Vercel 上的 JWT 处理优化建议 #

1. 优先使用数据库会话：Vercel 对请求头限制严格，数据库会话从根源避免 JWT Cookie 过大问题，同时更便于会话管理（如强制登出）。
2. 严格控制 JWT 字段：自定义encode时只保留必要的用户标识，禁止携带name、email等非必需字段。
3. 启用 JWT 压缩：若坚持使用 JWT，开启压缩功能可有效降低 Token 体积。
4. 正确配置环境变量：确保 Vercel 上的NEXTAUTH_URL设置为当前域名，避免认证流程中出现重定向错误导致 HTML 返回。
5. 验证边缘函数兼容性：使用 App Router 时，确认 Next-auth 与边缘函数的兼容性，避免响应格式异常。

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