使用CURL调用Next.js API路由无法在浏览器中设置Cookie

核心误区 #

你搞错了一个关键逻辑：CURL发起的请求和浏览器是完全独立的两个HTTP会话。API返回的Set-Cookie响应头只会被CURL接收并存在它自己的会话里，根本不会同步到浏览器的Cookie存储中。浏览器的Cookie是和自身的请求会话绑定的，其他客户端的请求不会影响它。

你的代码还有两个错误配置 #

1. domain: '/' 是无效值：domain字段需要填写具体的域名（比如localhost），不是路径，这个错误配置会导致浏览器直接忽略该Cookie。
2. 本地http环境设置secure: true：secure属性要求Cookie只能通过HTTPS传输，而你本地开发用的是http协议，浏览器会直接丢弃这个Cookie。

修正后的API路由代码 #

import { setCookie } from 'cookies-next'

export default function handler(req, res) {
    const isProduction = process.env.NODE_ENV === 'production'
    
    setCookie('test', 'test12345', {
        req,
        res,
        maxAge: 34000,
        path: '/',
        domain: 'localhost', // 本地开发正确域名
        sameSite: isProduction ? 'none' : 'lax', // 本地不需要跨域的sameSite配置
        secure: isProduction, // 本地http环境关闭secure
        httpOnly: false // 若需前端JS读取则设为false，否则设为true更安全
    })

    console.log('after cookie set')
    res.status(200).send(`Hello, test!`)
}

正确的测试方法（让浏览器获取Cookie） #

不能用CURL测试，必须让浏览器自己发起请求：

• 方法一：直接在浏览器地址栏输入 http://localhost:3000/api/hello，然后打开开发者工具（F12）→ Application → Cookies，就能看到设置的Cookie。
• 方法二：在前端页面里发起请求（以pages/index.js为例）：

// pages/index.js
export default function Home() {
  const setCookie = async () => {
    await fetch('/api/hello', {
      credentials: 'include' // 必须加这个，否则浏览器不会保存Cookie
    })
  }

  return (
    <div>
      <button onClick={setCookie}>点击设置Cookie</button>
    </div>
  )
}

补充跨域场景注意事项 #

如果你的前端和API不在同一个域名下，还需要：

1. 配置Next.js的CORS规则，允许带Credentials的请求。
2. Cookie必须设置sameSite: 'none'和secure: true（仅HTTPS环境）。
3. 前端请求时必须带上credentials: 'include'。

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