Next.js中无法调用依赖后端Cookie的认证API路由问题

核心排查与修复步骤 #

• 请求必须携带Cookie
  不管是客户端发起请求还是API路由转发请求，都需要手动配置携带Cookie：

  // 客户端fetch请求示例
  fetch('/api/your-protected-route', {
    credentials: 'include'
  })
  
  // Next.js API路由转发到后端的示例
  export async function GET(req) {
    const backendRes = await fetch(`${process.env.BACKEND_URL}/auth/data`, {
      headers: {
        cookie: req.headers.cookie // 把前端传来的Cookie原样传给后端
      }
    })
    const data = await backendRes.json()
    return NextResponse.json(data)
  }
  

• 检查Cookie的SameSite和Secure属性
  如果后端Cookie的SameSite设为Strict/Lax，且前后端跨域名，浏览器会拦截Cookie。让后端把SameSite改成None，同时加上Secure属性（仅HTTPS环境可用，本地开发可暂时跳过，生产环境必须开启）。

• CORS配置要正确（跨域场景）
  后端必须允许携带凭证：

  • 响应头添加Access-Control-Allow-Credentials: true
  • Access-Control-Allow-Origin不能使用*，需明确填写Next.js应用的域名，比如https://your-app.com

• 服务端渲染的特殊处理
  在getServerSideProps中请求后端时，要从context.req里获取Cookie并传递：

  export async function getServerSideProps(context) {
    const res = await fetch(`${process.env.BACKEND_URL}/auth/data`, {
      headers: {
        cookie: context.req.headers.cookie
      }
    })
    const data = await res.json()
    return { props: { data } }
  }
  

额外验证步骤 #

1. 打开浏览器开发者工具→Application→Cookies，确认Cookie已存在，且域名、路径与当前请求匹配。
2. 查看Network面板的请求头，确认Cookie字段已携带到目标API。
3. 验证后端认证逻辑，确保Cookie中的会话ID/令牌未过期、未被篡改。

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