Next.js后端数据无法传递至前端？前端接收空对象问题求助

我在开发Next.js应用时，前端组件调用后端API接口，后端能正确从数据库获取数据，但前端每次只收到空对象。

后端API代码（src/app/api/clientOrders/route.ts） #

import { prisma } from "@/lib/prisma";
// 省略其他导入
export async function GET(request: NextRequest) {
    const clientOrders = await prisma.clientOrders.findMany();

    console.log("--> clientOrders = " + JSON.stringify(clientOrders));

    return NextResponse.json(clientOrders);
}

后端控制台输出（数据正常） #

--> clientOrders = [{"id":1,"request_time":"2024-09-11T10:04:05.209Z","done_time":"2024-09-11T10:04:05.209Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"},{"id":2,"request_time":"2024-09-11T10:19:34.989Z","done_time":"2024-09-11T10:19:34.989Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"},{"id":3,"request_time":"2024-09-11T10:20:45.861Z","done_time":"2024-09-11T10:20:45.861Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"},{"id":4,"request_time":"2024-09-11T13:02:51.808Z","done_time":"2024-09-11T13:02:51.808Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"},{"id":6,"request_time":"2024-09-11T13:04:55.126Z","done_time":"2024-09-11T13:04:55.126Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"}]

前端组件代码（src/components/RestaurantActions/index.tsx） #

"use client";
import { prisma } from "@/lib/prisma";
import Image from 'next/image';

const RestaurantActions = () => {

    async function getClientOrders() {        
        const clientOrdersData = await fetch('http://localhost:3000' + '/api/clientOrders', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
        });

        console.log("=> ClientOrders retrieved stringified = " + JSON.stringify(clientOrdersData));
        
    }

    getClientOrders()

    return(
        // 组件HTML内容
    )
}

export default RestaurantActions

前端控制台输出（仅空对象） #

index.tsx:29 => ClientOrders retrieved from the backend = {}

核心问题 #

你直接将fetch返回的Response对象转成JSON打印了，这个对象本身并不包含接口返回的实际数据，它是一个封装了响应状态、头信息等的容器，必须调用.json()方法解析响应体后才能拿到后端返回的数据。

修复步骤 #

1. 解析响应体：在获取到response对象后，调用.json()方法解析JSON格式的响应体
2. （可选）处理请求异常：判断响应是否成功（ok属性为true），避免解析失败
3. （可选）移除多余请求头：GET请求不需要设置Content-Type请求头，后端接收GET请求时不会用到这个头
4. 移除错误导入：前端组件中不能导入prisma（这是后端依赖），会导致客户端报错，直接删除该导入

修改后的前端代码 #

"use client";
import Image from 'next/image';

const RestaurantActions = () => {

    async function getClientOrders() {        
        try {
            // 可以省略域名，直接用相对路径调用API
            const response = await fetch('/api/clientOrders', {
                method: 'GET',
            });

            if (!response.ok) {
                throw new Error(`请求失败：${response.status}`);
            }

            // 解析响应体拿到实际数据
            const clientOrdersData = await response.json();
            console.log("=> ClientOrders retrieved stringified = ", clientOrdersData);
        } catch (error) {
            console.error("获取订单数据失败：", error);
        }
    }

    getClientOrders();

    return(
        // 组件HTML内容
    )
}

export default RestaurantActions

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