NextJS 14如何在客户端浏览器设置Cookie？API路由设置失败求助

问题原因 #

在App Router的API路由里，直接用next/headers提供的cookies().set()只能操作服务器端的Cookie上下文，不会把Cookie添加到HTTP响应头里，客户端浏览器自然收不到这个Cookie。

修复方法 #

改用NextResponse对象来设置Cookie——所有要返回给客户端的响应头（包括Set-Cookie）都得通过Response实例传递。

修改后的完整代码 #

const { NextResponse } = require("next/server");
import connect from "@/app/lib/mongodb";
import MemberModel from "@/app/models/Member.model";
import Notifications from "@/app/models/Notifications";
const CryptoJS = require("crypto-js");

export async function POST(req) {
    const data = await req.json()
    await connect()
    let userdata = await MemberModel.find({
        email: data.email
    })
    if (userdata.length === 0) {
        return NextResponse.json({ uid: false })
    }

    const decryptedPassword = CryptoJS.AES.decrypt(userdata[0].password, process.env.CRYPTO_SECRET_KEY).toString(CryptoJS.enc.Utf8);
    if (userdata[0].email === data.email && decryptedPassword === data.password) {
        const oneDay = 24 * 60 * 60 * 1000
        // 创建NextResponse实例，设置Cookie后返回
        const response = NextResponse.json({ uid: true })
        response.cookies.set('email', decryptedPassword, { 
            expires: Date.now() + oneDay,
            path: '/', // 确保Cookie在整个站点生效
            httpOnly: true, // 可选，提升安全性，防止XSS
            secure: process.env.NODE_ENV === 'production' // 生产环境启用HTTPS时设为true
        })
        await Notifications.create({
            msg: `User login with email : ${userdata[0].email}`
        })
        return response
    } else {
        return NextResponse.json({ uid: false })
    }
}

关键注意事项 #

• 必须通过NextResponse实例的cookies.set()方法设置Cookie，这样才会把Set-Cookie头写入响应。
• 加上path: '/'，避免Cookie只在API路由路径下生效。
• 生产环境建议开启secure: true，确保Cookie仅通过HTTPS传输。
• httpOnly: true能防止前端JS读取Cookie，降低XSS攻击风险（如果不需要前端读取Cookie的话）。

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