Awas Salah Stringify dan Header pada Cara Mengatasi Fetch Post Body Kosong Javascript

Ditulis oleh JavaScript

Body POST fetch yang kosong hampir selalu berasal dari pengiriman yang salah, bukan dari server. Object JavaScript yang dikirim langsung tanpa JSON.stringify() atau tanpa header Content-Type: application/json membuat server menerima {}, null, atau tidak membaca apa pun.

Penyebab Fetch POST Body Kosong di Browser

Bedakan dulu tiga kondisi ini. Body tidak dikirim berarti tab Network tidak menampilkan payload. Body salah format berarti payload ada, tetapi server gagal parse. Body dibaca salah berarti masalah ada saat membaca response di browser.

  • Lupa JSON.stringify(): fetch menerima object lalu mengubahnya menjadi teks [object Object]. Cek di DevTools Network, tab Payload.
  • Content-Type tidak cocok: kirim JSON tetapi header masih text/plain. Cek tab Headers pada request.
  • Membaca response dua kali: memanggil response.json() lalu response.text(). Stream response hanya bisa dibaca sekali.
  • Method bukan POST: body pada GET umumnya diabaikan browser. Cek kolom Method di Network.
  • Object memang kosong: state form belum terisi saat fetch dijalankan. Cek dengan console.log(data) sebelum fetch.

Tabel Troubleshooting Body Kosong

Server terima {} atau null | Object dikirim tanpa stringify | Bungkus dengan JSON.stringify(data)

Tabel berikut merangkum kasus yang paling sering muncul.

Error/Kondisi Penyebab Solusi
Server terima {} Body tidak ter-stringify Gunakan body: JSON.stringify(data)
Server terima null Content-Type salah Set application/json
response.text() kosong Response sudah dibaca Baca response satu kali saja
Payload hilang di Network Method GET atau object undefined Pakai method POST dan validasi data
SyntaxError JSON parse Server balas HTML atau teks kosong Periksa response.ok dan status endpoint

BACA JUGA:

Cara Memperbaiki Kiriman POST agar Terbaca Server

Ikuti urutan ini agar sumber masalah terlihat jelas.

  1. Pastikan method: “POST” tertulis benar.
  2. Ubah object menjadi string dengan JSON.stringify().
  3. Tambah header Content-Type: application/json.
  4. Periksa response.ok sebelum parsing.
  5. Parsing response satu kali, pilih json() atau text().
// Salah: object dikirim langsung
fetch("/api/user", {
  method: "POST",
  body: { nama: "Budi" }
});

// Benar untuk JSON
const data = { nama: "Budi" };
const res = await fetch("/api/user", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data)
});
if (!res.ok) throw new Error("POST gagal: " + res.status);
const hasil = await res.json();

Baris headers memberi tahu server bahwa isi request adalah JSON. Baris body mengubah object menjadi JSON string yang valid. Pengecekan res.ok mencegah parsing saat server mengembalikan status 404 atau 500.

Cara Mencegah Body Kosong Terulang

  • Validasi object sebelum stringify, pastikan bukan undefined atau hasil form kosong.
  • Samakan nama field dan format dengan dokumentasi API tujuan.
  • Gunakan satu fungsi pembantu fetch POST agar header selalu konsisten.
  • Jangan kirim token rahasia atau password berlebihan dari frontend publik.
  • Jangan mematikan keamanan browser untuk mengatasi error fetch.

FAQ

Kenapa body POST fetch terbaca {} di server?

Object dikirim tanpa JSON.stringify sehingga server gagal membaca isinya.

Kenapa await response.json() gagal setelah body kosong?

Response mungkin kosong atau sudah dibaca sebelumnya sehingga stream tidak tersisa.

Artikel Terkait