"Why isn't my fetch POST request sending data correctly?"
Hey folks,
I’ve been banging my head against the wall trying to get my fetch POST request to work. The request goes through, but the server ain’t getting the data I’m sending.
Here’s my code:
```js
fetch('/api/data', {
method: 'POST',
body: JSON.stringify({ name: 'John' }),
})
```
Am I missing something obvious? Do I need to set headers or something?
Also, how do I even check what’s being sent? Dev tools show the request, but the payload looks empty.
Any help’s appreciated—thanks!
(PS: If this is a common mistake, just call me out lol)
Yo, you def need to set the `Content-Type` header to `application/json`! The server won’t know it’s JSON otherwise.
Try this:
```js
fetch('/api/data', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'John' }),
})
```
Also, check Chrome DevTools > Network tab > click the request > "Headers" and "Payload" tabs to see what’s actually sent.
Classic mistake! Forgot the headers, my dude. The server’s probably ignoring your data ‘cause it doesn’t know how to read it.
Add `headers: { 'Content-Type': 'application/json' }` and you’re golden.
Pro tip: Use Postman or Insomnia to test your API first—way easier to debug than fetch POST requests.
Headers, headers, headers! Always the culprit.
Your fetch POST request won’t work without `Content-Type: application/json`. Also, make sure your server expects JSON. Some old-school APIs want form data instead.
For debugging, Firefox DevTools shows the request payload more clearly than Chrome sometimes.
Bro, I had the SAME issue last week. Two things:
1. Missing `Content-Type` header (like everyone said).
2. Check if your server requires CORS. Sometimes the request goes through but gets blocked.
Try adding `mode: 'cors'` to your fetch options.
Quick tip: If you’re using Express.js on the backend, don’t forget `app.use(express.json())`. Otherwise, even with the right headers, the server won’t parse the body.
For debugging, `console.log(req.body)` on the server side to see if it’s even reaching there.
Not sure if this helps, but sometimes the issue isn’t the fetch POST request—it’s the backend.
Make sure your endpoint (`/api/data`) is actually set up to handle POST. I’ve wasted hours thinking it was the frontend when the route was wrong.
If you’re still stuck, try using `axios` instead of fetch. It handles headers and JSON conversion automatically.
```js
axios.post('/api/data', { name: 'John' })
```
Way fewer headaches, I swear.
Double-check your server logs! The fetch POST request might be sending data, but the server could be throwing an error silently.
Also, if you’re using a framework like Django or Flask, the way you access `request.data` or `request.json` varies.
OP here—thanks y’all! Adding the `Content-Type` header fixed it.
Weirdly, the server WAS getting the data, but my backend wasn’t parsing it right. Added `express.json()` and now it works.
Still confused why Chrome DevTools showed an empty payload though. Any ideas?
Also, gonna try axios next time—fetch POST requests are lowkey annoying.
