Can't Post JSON with Javascript 'fetch' in React Native?

Question

I'm currently working on a really simple project. When I tried to console log req.body it gives me empty object.

app.js (React Native)

const musicPlayingHandle = () => {
    setMusicPlaying(!isMusicPlaying);
    fetch('http://192.168.1.23:3000/musicHandler', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type' : 'application/json'
      },
      body: JSON.stringify(data)
    })
    .then((response) => response.json())
    .then((res) => {
      return res;
    })
  }

server.js (Node JS Backend API)

require('dotenv').config();

const express = require('express');
const ejs = require('ejs');
const cors = require('cors');

const app = express();

app.use(express.urlencoded({ extended: true }));
app.use(cors());
app.set('view engine', 'ejs');                          
app.set('views', __dirname+'/views');                   
app.use(express.static('public'));

app.get('/', (req, res) => {
    res.render('index');
});

app.post('/musicHandler', (req, res) => {
    console.log(req.body);
    res.json({'msg': 'OK!'});
});

app.listen(3000, '0.0.0.0', () => {
    console.log('Canım Çok Sıkıldı Çalışıyor...');
});

What is data? How sure are you it's not an empty object? How sure are you that it's JSON serializable? — Jared Smith
– Jared Smith, Commented Apr 4, 2021 at 17:19
@JaredSmith 'const data = { value: isMusicPlaying.toString() };' i saw this on internet also i tried so much other ways and im logging when app get an post request imgur.com/a/L2VFql5 this is the output when i send post request via react native — FantaLaTone
– FantaLaTone, Commented Apr 4, 2021 at 17:21
i think you need to put body-parser on the express setting expressjs.com/en/resources/middleware/body-parser.html . Also don't forget to try catch in the backend. and in the frontend after the last then you can add catch like => then((res) => return res).catch((err)=>console.log(err)) — ucup
– ucup, Commented Apr 4, 2021 at 18:25

Moath Thawahreh · Accepted Answer · 2021-04-04 19:13:54Z

2

You should parse the incoming requests with JSON payloads.

In server.js add the middleware fucntion:

app.use(express.json())

edited Apr 4, 2021 at 19:13

answered Apr 4, 2021 at 18:29

Moath Thawahreh

2,6692 gold badges19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't Post JSON with Javascript 'fetch' in React Native?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related