Next.js Beta App Router中Fetch GET请求失败，浏览器访问正常

核心问题分析 #

你遇到的情况本质是客户端fetch请求未携带用户Cookie，导致API路由中getUserFromCookie无法获取用户信息，进而引发后续逻辑异常（可能抛出未捕获错误），最终返回空响应体，触发Unexpected end of JSON input错误；而浏览器直接访问时会自动携带Cookie，所以能正常执行。

具体修复步骤 #

1. 给fetch请求添加凭证携带配置 #

在projectsGet函数的fetch选项中，添加凭证携带配置，确保请求携带用户Cookie，同时改用相对路径避免环境适配问题：

export const projectsGet = async () => {
  const res = await fetch("/api/project", {
    method: "GET",
    credentials: 'include', // 关键：携带Cookie
    // GET请求无需Content-Type头，可直接移除
  });

  // 先检查响应状态，提前处理错误
  if (!res.ok) {
    throw new Error(`请求失败: ${res.status}`);
  }

  console.log(res, 'before')
  const data = await res.json()
  console.log(data, 'after')
  
  return data
};

2. 给API路由添加错误捕获逻辑 #

在GET路由中添加try-catch，避免未捕获错误导致无响应体返回，同时处理用户未登录的情况：

import { NextResponse } from 'next/server';

export const GET = async () => {
  try {
    console.log("in GET /projects");
    const user = await getUserFromCookie(cookies());

    if (!user) {
      // 用户未登录时返回明确的错误响应
      return NextResponse.json({ error: "未授权" }, { status: 401 });
    }

    const projects = await db.project.findMany({
      where: {
        ownerId: user.id,
      },
      include: {
        tasks: true,
      },
    });

    const filteredProjects = projects.filter((project) => !project.deleted);

    return NextResponse.json(filteredProjects);
  } catch (err) {
    console.error("GET路由错误:", err);
    // 确保错误时返回合法JSON响应
    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
  }
};

3. 额外优化建议 #

• 始终使用相对路径发起API请求，避免部署时域名变更导致的适配问题；
• 移除GET请求中不必要的Content-Type头，减少冗余请求信息；
• 客户端请求中添加响应状态检查，便于快速定位请求失败原因。

验证方法 #

1. 重启Next.js开发服务器；
2. 调用projectsGet函数，查看API路由的console.log是否正常触发；
3. 检查浏览器控制台的网络请求，确认Cookie已携带且响应体为合法JSON。

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