NextJS beta应用程序路由器：使用fetch请求失败，但在浏览器中正常工作

Question

我正在将 nextJS 与 APP 目录一起使用，并且在执行 GET 请求时遇到此问题...

我有以下函数可以从我的 /project Route.ts 中获取Projects。

看起来它没有触发我的routes.ts中的GET函数

console.log("in GET /projects") 永远不会被触发，并且我收到意外的 JSON 错误结束。

但是，如果我在浏览器中访问“http://localhost:3000/api/project”，它确实会命中我的routes.ts 中的 GET 函数，并且我会返回 JSON...

感谢您的帮助，我已经研究这个问题有一段时间了......

export const projectsGet = async () => {
  const res = await fetch("http://localhost:3000/api/project", {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  });

  console.log(res, 'before')     //triggers
  const data = await res.json()  // error: Unexpected end of JSON input
  console.log(data, 'after')     // does not trigger
  
  return data
};

这是我的项目路线，位于 /api/project/route.ts 中。我在同一个文件中有一个 POST 路由，它创建了一个项目并且工作正常......

export const GET = async () => {
  console.log("in GET /projects");  //never triggers unless i visit the URL in browser

  const user = await getUserFromCookie(cookies());

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

  const filteredProjects = projects.filter((project) => {
    return project.deleted === false;
  });

  return NextResponse.json(filteredProjects);
};

Answer 1

我认为你应该在`/api/project/route.ts中以这种形式返回json。

export async function GET(){
  console.log("in GET /projects");

  const user = await getUserFromCookie(cookies());

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

  const filteredProjects = projects.filter((project) => {
    return project.deleted === false;
  });

  return new Response(JSON.stringify(filteredProjects));
};