Next.js getServerSideProps调用本地API报JSON解析错误排查

报错JSON解析位置0处存在意外的<标记的核心原因是：服务端发起请求时拿到的响应不是预期JSON，而是以<开头的HTML内容（通常是Next.js的404/500错误页、服务未就绪时的兜底页）。浏览器访问正常、服务端调用失败，和代码实现问题直接相关：

• getServerSideProps运行在Node.js服务端环境，硬编码http://localhost:3000作为请求地址存在环境兼容问题：本地开发时如果Next.js服务未完全就绪、或者部署到线上后服务端环境不存在可访问的localhost服务，请求就会命中HTML兜底页，解析JSON自然失败。
• 现有getServerSideProps逻辑存在明显漏洞：虽然调用了MachineService.listOrgs()，但完全没有使用接口返回结果，最终传给页面的是硬编码的固定数组，接口请求的结果根本没有被消费。
• listOrgs方法存在冗余逻辑：手动给本身返回Promise的fetch套了一层多余的Promise包装，且没有做响应状态校验，只要接口返回非200状态（比如404、500），直接调用res.json()就会触发解析错误。

按以下步骤调整即可解决问题：

1. 优先消除不必要的HTTP请求（推荐）
   Next.js的/api路由本身运行在服务端，你可以把API路由里查询组织列表的核心逻辑抽成公共可复用的方法，API路由和getServerSideProps都直接调用这个公共方法拿数据，不需要走HTTP请求，从根源上避免服务端请求地址、环境适配问题，还能减少一次HTTP开销。
   如果暂时不想重构API逻辑，服务端发请求时不要硬编码localhost地址，通过环境变量配置服务端可访问的服务域名，或者从context.req头中提取当前服务host拼接完整请求地址，保证服务端环境能正确访问到接口。
2. 修正getServerSideProps逻辑，正确消费接口返回结果，加上异常捕获兜底。
3. 精简listOrgs方法，去掉冗余Promise包装，增加响应状态校验，避免非成功响应触发JSON解析错误。

修正后代码参考 #

listOrgs方法 #

const listOrgs = async (nextToken, limit) => {
  const res = await fetch('http://localhost:3000/api/organizations/')
  // 先校验响应状态，非成功状态直接抛错，不要直接解析JSON
  if (!res.ok) {
    throw new Error(`请求组织列表失败，状态码：${res.status}`)
  }
  const result = await res.json()
  return { Organizations: result }
}
export default listOrgs;

getServerSideProps逻辑 #

export async function getServerSideProps(context) {
  try {
    const res = await MachineService.listOrgs()
    // 正确使用接口返回的组织数据
    const organizatons = res.Organizations
    return {
      props: { organizatons },
    }
  } catch (err) {
    console.error('服务端获取组织列表失败：', err)
    // 错误场景可根据业务需求返回404，或者返回空数组兜底
    return {
      props: { organizatons: [] },
      // 也可以配置返回notFound: true触发404页
    }
  }
}

注意：如果本地开发时偶发这个错误，大概率是Next.js开发服务还没完全启动就触发了页面请求，等服务完全就绪后刷新即可，按照上面的方案加了异常捕获和状态校验后，就算偶发请求失败也不会直接抛出解析错误的白屏问题。

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