NextJS beta應用程式路由器:使用fetch請求失敗,但在瀏覽器中正常運作
P粉141035089
P粉141035089 2024-03-28 21:44:56
0
1
302

我正在將 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);
};

P粉141035089
P粉141035089

全部回覆(1)
P粉135799949

我認為你應該在`/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));
};
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板