Next.js 14中如何读取server.js设置的API路由Cookie？

核心问题1：API路由误用客户端Cookie库 #

js-cookie是专门给浏览器环境设计的Cookie操作库，依赖浏览器的document.cookie对象。而Next.js的API路由运行在Node.js服务端环境，没有document对象，所以用它完全拿不到Cookie值。

核心问题2：Cookie配置错误导致无法正常存储 #

开发环境下（localhost）你的Cookie配置有两个问题：

• secure: true：该属性要求Cookie只能在HTTPS协议下存储，而localhost默认是HTTP，会导致Cookie无法被浏览器保存。
• domain: .localhost:${port}：浏览器对localhost的域名处理特殊，带端口的domain设置不符合规范，会导致Cookie无法被正确识别。

修正后的代码 #

1. 自定义服务器中间件（server.js）

// Middleware to extract tenant from subdomain
server.use((req, res, next) => {
    const hostname = req.hostname;
    const subdomain = hostname.split('.')[0]; // Assumes format `tenant.domain.com`
    
    const isProduction = process.env.NODE_ENV === 'production';
    res.cookie('tenant', subdomain, {
        httpOnly: false,
        path: '/',
        secure: isProduction, // 仅生产环境开启secure
        sameSite: 'strict',
        domain: isProduction ? `.yourdomain.com` : undefined, // 开发环境不指定domain，让浏览器自动处理
    });

    // 可选：直接把tenant挂载到req对象，后续API路由可直接读取，无需依赖Cookie
    req.tenant = subdomain;
    next();
});

2. API路由代码

import { NextApiRequest, NextApiResponse } from 'next';
import { NextResponse } from 'next/server';

// 扩展类型，包含中间件挂载的tenant属性
type NextApiRequestWithTenant = NextApiRequest & { tenant?: string };

export async function GET(req: NextApiRequestWithTenant) {
    // 方式1：从请求的Cookie中读取（服务端直接用req.cookies）
    const tenantFromCookie = req.cookies.tenant;
    // 方式2：直接读取中间件挂载到req上的tenant值（更高效）
    const tenantFromReq = req.tenant;

    console.log('[TENANT API] Cookie中的tenant:', tenantFromCookie);
    console.log('[TENANT API] 请求对象中的tenant:', tenantFromReq);

    return NextResponse.json({ 
        tenant: tenantFromCookie || tenantFromReq, 
        data: 'some data' 
    });
}

额外说明 #

• 如果你不需要前端读取这个Cookie，可以把httpOnly设为true，提升安全性，此时前端无法通过document.cookie读取，但服务端仍能通过req.cookies获取。
• 若使用Next.js官方推荐的middleware.ts而非自定义服务器，实现逻辑类似，但语法需适配Next.js的边缘运行时规范。

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