Next.js服务端API请求无法获取Cookie，返回Unauthenticated错误

你遇到的问题核心是Next.js服务端组件（Server Component）的执行上下文和客户端不同——服务端组件在服务器端运行，不会自动继承浏览器请求的Authorization头；而客户端组件在浏览器中执行，请求会自动带上当前页面的请求头，所以能正常获取用户信息。下面是具体解决方案：

1. 手动传递请求头到内部API调用 #

在服务端组件中，通过next/headers提供的headers()函数获取当前页面请求的Authorization头，然后在调用内部API时手动携带这个头：

import { headers } from 'next/headers';

async function UserProfile() {
  // 获取当前请求的Authorization头
  const authHeader = headers().get('authorization');
  
  // 调用内部API时携带头信息
  const res = await fetch('http://localhost:3000/api/auth/me', {
    headers: {
      ...(authHeader && { Authorization: authHeader }),
    },
    // 若需实时数据，添加cache: 'no-store'避免缓存
    cache: 'no-store',
  });

  if (!res.ok) {
    throw new Error('获取用户信息失败');
  }

  const user = await res.json();
  return <div>你好，{user.name}</div>;
}

export default UserProfile;

2. 直接调用后端逻辑，跳过内部API #

既然服务端组件本身就在服务器端运行，没必要通过网络请求调用内部API，直接复用后端的用户认证逻辑更高效，也能避免请求头传递问题：

import { headers } from 'next/headers';
// 假设你有封装好的认证工具函数
import { getUserFromToken } from '@/lib/auth';

async function UserProfile() {
  const authHeader = headers().get('authorization');
  
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    throw new Error('未授权');
  }

  // 提取令牌并直接调用后端逻辑
  const token = authHeader.split(' ')[1];
  const user = await getUserFromToken(token);

  return <div>你好，{user.name}</div>;
}

export default UserProfile;

3. 检查API路由的认证逻辑 #

确认api/auth/me/route.js中提取令牌的逻辑是否正确，确保能正确解析服务端组件传递的请求头：

// app/api/auth/me/route.js
export async function GET(request) {
  const authHeader = request.headers.get('authorization');
  
  // 校验Authorization头格式
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return new Response(JSON.stringify({ message: 'Unauthenticated.' }), {
      status: 401,
    });
  }

  const token = authHeader.split(' ')[1];
  // 替换为你的令牌验证和用户信息获取逻辑
  const user = await verifyTokenAndFetchUser(token);

  return Response.json(user);
}

内容的提问来源于stack exchange，提问作者Selçuk