Vercel页面加载与API调用时x-forwarded-for IP不一致问题排查

核心原因 #

1. x-forwarded-for头格式未处理：该头字段通常是逗号分隔的IP列表（如用户真实IP, 代理节点IP1, 代理节点IP2），你的代码直接取整个头字符串，未提取第一个有效IP（用户真实IP）。SSR页面请求和API请求的代理链路可能不同，导致拿到的IP列表内容/长度有差异，最终得到的"IP"值不一致。
2. 环境差异影响：本地开发时无x-forwarded-for头，直接使用fallback IP；但生产环境（Vercel）中该头存在，但请求路径（页面路由 vs API路由）不同可能导致头内容变化。

解决办法 #

1. 统一IP提取逻辑，正确解析x-forwarded-for #

修改server/getUserId.ts，确保只提取用户真实IP：

export function getUserId() {
  const headers = NextHeaders()
  const fallback = '171.23.136.120' // 你的IP地址

  let ip = headers.get('x-forwarded-for')
  // 拆分逗号分隔的IP列表，取第一个有效IP
  if (ip) {
    ip = ip.split(',').map(item => item.trim())[0]
  }

  return {
    id: ip ?? fallback,
  }
}

2. 确保全链路逻辑一致 #

SSR布局和API路由必须使用同一个getUserId函数，避免出现两套IP提取逻辑。

3. 优化开发环境IP处理（可选） #

本地开发时，Next.js的请求对象req.ip可能更准确，可添加环境判断适配：

export function getUserId() {
  const fallback = '171.23.136.120'
  let ip = ''
  const isDev = process.env.NODE_ENV === 'development'

  if (isDev) {
    // 本地开发时，从请求对象获取IP（需在API路由或SSR中获取请求实例）
    const req = await getRequest() // 适配Next.js版本获取请求对象
    ip = req?.ip ?? fallback
  } else {
    const headersList = NextHeaders()
    ip = headersList.get('x-forwarded-for') || ''
    if (ip) {
      ip = ip.split(',').map(item => item.trim())[0]
    }
  }

  return { id: ip || fallback }
}

4. 验证生产环境请求头 #

在Vercel控制台查看请求日志，确认x-forwarded-for的实际格式，确保解析逻辑覆盖所有场景。

内容的提问来源于stack exchange，提问作者nas.engineer