Next.js 13 DELETE 请求“语法错误：JSON 输入意外结束”

Question

我有一个使用 Next 13 的网络应用程序，其

route.ts

文件夹下有一个

api

文件 目前包含 2 种不同的方法 POST 和 DELETE。

两种方法都成功接收请求，但是当尝试 JSON 解析请求正文时，它适用于 POST，但不适用于 DELETE，即使我执行完全相同的步骤。

我在开发工具的“网络”选项卡中检查了请求，有效负载正常。 我错过了什么？

这是错误：

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at NextRequest.json (node:internal/deps/undici/undici:6160:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async DELETE (webpack-internal:///(sc_server)/./app/api/workPlace/route.ts:35:22)
    at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:242:37)

DELETE 请求正文应包含一个具有一个属性的 json - 字符串数组。 前端如下：

export async function fetchRemoveWorkPlaces(ids: string[]) {
    const data = { ids: ids }
    const response = await fetch(
        '/api/workPlace', 
        {
            method: 'DELETE',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        }
    )
  }

这是服务器中的

route.ts

：

export async function POST(req: Request, res: NextResponse , context: {}) {
    
    try {
        const body: any = await req.json()
        const response = await workPlaceDao.addWorkPlace(body)

        return NextResponse.json(
            {
                success: true,
                workPlace: response
            }, 
            { status: 200 })
    } catch (e) {
        console.log('Error occurred while Add Work Place Request');
        console.log(e);
        return NextResponse.json({success: false}, { status: 500 })
    }
}
export async function DELETE(req: Request, res: NextResponse , context: {}) {

    try {
        const body: any = await req.json()
        const response = await workPlaceDao.deleteWorkPlace(body.ids)

        return NextResponse.json(
            {
                success: true,
            }, 
            { status: 200 })
    } catch (e) {
        console.log('Error occurred trying to delete Work Places');
        console.log(e);
        return NextResponse.json({success: false}, { status: 500 })
    }
}

Answer 1

这是一个已知的错误，已得到解决（尽管没有取得太大进展）

• 您可以在这里阅读更多内容：https://github.com/vercel/next.js/issues/53882

• 为了快速解决问题，我们只需采用老式方式（别名）即可。简而言之，目前可以很好地工作的两个是 GET/POST。

• 让您的钩子调用REST API

export async function fetchRemoveWorkPlaces(ids: string[]) {
    const data = { ids: ids }
    const response = await fetch(
        '/api/workPlace2',  // Change it to something similar
        {
            method: 'DELETE',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        }
    )
  }

然后在新获取的“POST”请求中拍下删除代码

export async function POST(req: Request, res: NextResponse , context: {}) {
    
   try {
        const body: any = await req.json()
        const response = await workPlaceDao.deleteWorkPlace(body.ids)

        return NextResponse.json(
            {
                success: true,
            }, 
            { status: 200 })
    } catch (e) {
        console.log('Error occurred trying to delete Work Places');
        console.log(e);
        return NextResponse.json({success: false}, { status: 500 })
    }
}

希望有帮助！