Next.js 15路由处理器中Cookie无法设置的问题求助

1. 修正代码中的语法错误与Cookie设置逻辑 #

原代码存在两处引号语法错误，同时next/headers的cookies()是同步函数无需await，且未指定Cookie的关键属性，导致浏览器无法正常存储。修改后的代码如下：

import { cookies } from "next/headers";

export async function GET() {
    const data = {
        email: 'user',
        password: 'pass'
    }

    const request = await fetch(`loginurl`, {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json',
        },
    })

    const response = await request.json();
    const { token } = response;

    console.log(token);

    const cookieStore = cookies(); // 无需await，同步调用即可

    cookieStore.set('token', token, {
        path: '/', // 确保Cookie在全站生效
        httpOnly: true, // 防御XSS攻击，可选但推荐
        secure: process.env.NODE_ENV === 'production', // 生产环境需HTTPS，自动适配环境
        maxAge: 60 * 60 * 24 * 7, // 设置7天有效期
    })

    return Response.json({ response })
}

2. 客户端调用API时需携带凭证 #

在Page.js中调用该API路由时，必须设置credentials: 'include'，否则浏览器会拒绝接收并存储Cookie：

// Page.js中的调用示例
async function handleLogin() {
  const res = await fetch('/api/auth', {
    method: 'GET',
    credentials: 'include', // 关键：允许浏览器携带/存储凭证
  });
  const data = await res.json();
  // 后续业务逻辑
}

3. 验证响应头确认Cookie发送状态 #

打开Chrome开发者工具的Network标签，查看/api/auth请求的响应头：

• 如果没有Set-Cookie字段：说明服务器端Cookie设置逻辑仍有问题，检查代码中的语法或参数是否正确
• 如果有Set-Cookie但Application面板看不到：检查Cookie属性是否符合浏览器要求（比如HTTP环境下设置了secure，或path范围过窄）

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