typescript - Next.js 13 DELETE request 'SyntaxError: Neočakaný koniec vstupu JSON'

Mám webovú aplikáciu používajúcu Next 13 s route.ts súborom v zložke api, ktorý momentálne obsahuje 2 rôzne metódy POST a DELETE.

Obe metódy úspešne prijímajú požiadavku, ale pri pokuse o JSON parsovanie tela požiadavky to funguje pre POST, ale nie pre DELETE, aj keď vykonávam presne rovnaké kroky.

Skontroloval som požiadavku na karte 'Sieť' v nástrojoch pre vývojárov a obsah je v poriadku. Čo mi chýba?

Toto je chyba:

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)

Telo požiadavky DELETE by malo obsahovať JSON s jednou vlastnosťou - poľom reťazcov. Frontend vyzerá nasledovne:

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)
        }
    )
  }

Toto je route.ts na serveri:

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 })
    }
}

Odpoveď č. 1

Je to známa chyba a bola riešená (hoci sa veľký pokrok neurobil)

• Viac si o tom môžete prečítať tu: https://github.com/vercel/next.js/issues/53882

• Pre rýchle obídenie problému to musíme jednoducho urobiť staromódnym spôsobom (aliasovanie). Stručne povedané, tie dva, ktoré momentálne môžu pekne fungovať, sú GET/POST.

• Pre váš háčik na volanie 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)
        }
    )
  }

a potom vložiť kód na vymazanie do novo získanej požiadavky „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 })
    }
}

Odpoveď č. 2

vo vašom frontendovom projekte NextJs:

await axios.delete(`/api/item`, { params: { id } })

vo vašom backendu NextJs: /api/item/route.ts

export async function DELETE(req: Request) {
  console.log("DELETE", req, req.url);
  const id = req.url.split('=')[1];
  ...
}