Bonjour,

Je rencontre un problème concernant l'envoie de donnée d'une application React-Native à un serveur en NodeJs avec Express. Mon serveur reçoit bien ma requête POST, cependant le req.body reste vide et je n'arrive donc pas à lui faire passer mes données. À noté que j'arrive bien à récupérer des données d'une base de donnée avec Express et à les envoyés à React-Native afin de les affichés. Voici mon code :

Mon terminal lorsque j'effectue ma requête POST :

Go to http://localhost:3000/users so you can see the data.
req.body :  {}
Connected to bdd
1 record inserted, result :  OkPacket {
  fieldCount: 0,
  affectedRows: 1,
  insertId: 71,
  serverStatus: 2,
  warningCount: 0,
  message: '',
  protocol41: true,
  changedRows: 0
}

Mon code React-Native :

fetch('http://localhost:3000/newuser', {
        method : 'POST',
        mode : 'no-cors',
        headers : {
            'Accept' : 'application/json',
            'Content-Type' : 'application/json',
        },
        body : JSON.stringify({
            username : 'test',
        })
    })  .then((response) => response.json())
        .catch((error) => {
            console.error(error);
        });

Mon serveur Express :

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const cors = require('cors');

const connection = mysql.createPool({
    host : 'localhost',
    user : 'root',
    password : '',
    database : 'react'
});

// Starting our app.
const app = express();

app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/users', function (req, res) {
    ...
});

app.post('/newuser', function (req, res) {
    // console.clear()
    console.log("req.body : ", req.body)
    let username = req.body.username;

    connection.getConnection(function (err) {
        if (err) throw new err;
        console.log("Connected to bdd");

        const sql = "INSERT INTO users(username) VALUES ('" + username + "')";
        connection.query(sql, function (err, result) {
            if (err) throw err;

            console.log("1 record inserted, result : ", result);
            res.send('POST request')
        });
    });
})

// Starting our server.
app.listen(3000, () => {
    console.log('Go to http://localhost:3000/users so you can see the data.');
});

bonjour j'ai eu ce probléme à de multiple reprise ( pas avec reactjs native mais avec express + body-parser ) ,

j'ai pus le résoudre de deux façon sois en remplaçant le content-type du fetch par : "application/x-www-form-urlencoded" ,

fetch('http://localhost:3000/newuser', {
        method : 'POST',
        mode : 'no-cors',
        headers : {
            'Accept' : 'application/json',
            'Content-Type' : 'application/x-www-form-urlencoded',
        },
        body : JSON.stringify({
            username : 'test',
        })
    })  .then((response) => response.json())
        .catch((error) => {
            console.error(error);
        });

soit en laissant carrément le headers du fetch vide:

fetch('http://localhost:3000/newuser', {
        method : 'POST',
        mode : 'no-cors',
        body : JSON.stringify({
            username : 'test',
        })
    })  .then((response) => response.json())
        .catch((error) => {
            console.error(error);
        });

Merci, ça me fait déjà bien avancer, j'arrive à recevoir quelque chose avec ma requête, cependant mon req.body me retourne ceci et je ne sais pas comment m'en servir car ici le req.body.username ne fonctionne pas.

Go to http://localhost:3000/users so you can see the data.
req.body :  [Object: null prototype] { '{"username":"Bonjour"}': '' }
req.body.username :  undefined

c'est à cause du stringify:

fetch('http://localhost:3000/newuser', {
        method : 'POST',
        mode : 'no-cors',
        headers : {
            'Accept' : 'application/json',
            'Content-Type' : 'application/x-www-form-urlencoded',
        },
        body : "username=test"
    })  .then((response) => response.json())
        .catch((error) => {
            console.error(error);
        });

 devrait logger : { "username": "test" } , côté serveur.

-
Edité par SamuelGaborieau3 31 mars 2020 à 0:03:41

Merci beaucoup, et dans le cas ou je veux envoyer plusieurs données, à tu une solution ? Car j'ai essayé différente manière mais rien ne fonctionne, par exemple ..

body : "username=hello" + "user=world"

body : { "username": "hello", "user" : "world" }

body : ["username=hello", "user=world"]

bonjour le body parser parse par défaut une query string sous cette forme la:

"foo=bar&foo2=bar2&foo3=bar3"

pour le transformé en JSON:

{ "foo": "bar" , "foo2": "bar2" , "foo3": "bar3"  }

si tu trouves "chiant" de devoir envoyé une querystring d'un kilométre avec un chapeau sur la tête ^.^ tu peut demandé à ton body-parser de parser en tant que JSON et non en tant que querystring dans ce cas tu pourra envoyé un JSON.stringify et ton body parser fera un JSON.parse sans essayé de parser comme une url au préalable et tu pouras fetch un truc comme:

fetch( 'target.php' , {

  body: JSON.stringify( {

     foo: "bar" ,

     foo2: "bar2"

  } )

}  ) ;

je me souviens plus comment il faut paramètré le body parser pour qu'il comprennent que tu envoie du JSON mais il y à la feuille de doc du body-parser avec toutes les options que tu peut lui donné ici 

Je te remercie, la première méthode fonctionne parfaitement, mais je n'ai pas réussi à trouver pour la seconde, en cherchant un peu j'ai cru comprendre qu'il fallait ajouter ça mais je les avais déjà mis dans mon code et ça ne change rien

app.use(bodyParser.urlencoded({ extended : false }));
app.use(bodyParser.json());

J'ai essayé différentes méthodes :

const jsonStr = JSON.stringify(req.body, null, 2)
const qsParse = qs.parse(req.body);
const qsStrObj = qs.stringify(qsParse);
const qsStrReq = qs.stringify(req.body);


console.log("JSON.stringify : ", jsonStr)
console.log("qs.parse(req.body) : ", qsParse)
console.log("qs.stringify(qsParse) : ", qsStrObj)
console.log("qs.stringify(req.body) : ", qsStrReq)
console.log("req.body : ", req.body)
console.log("req.body.foo : ", req.body.foo)

et j'obtient ceci :

JSON.stringify :  {
  "{\"foo\":\"bar\",\"foo2\":\"bar2\"}": ""
}
qs.parse(req.body) :  { '{"foo":"bar","foo2":"bar2"}': '' }
qs.stringify(qsParse) :  %7B%22foo%22%3A%22bar%22%2C%22foo2%22%3A%22bar2%22%7D=
qs.stringify(req.body) :  %7B%22foo%22%3A%22bar%22%2C%22foo2%22%3A%22bar2%22%7D=
req.body :  [Object: null prototype] { '{"foo":"bar","foo2":"bar2"}': '' }
req.body.foo :  undefined

ok est ce que tu as essayé de balancé l'objet en brut sans le stringify comme tu reçois une  object parse avec ton object envoyé en tant que clés: 

qs.parse(req.body) :  { '{"foo":"bar","foo2":"bar2"}': '' }

lorsque que tu fait un stringify côté client peut être le navigateur le fait déjà lui même:

fetch( 'target.php' , {

  body: {

     foo: "bar" ,

     foo2: "bar2"

  }

}  ) ;

si ça ne marche pas je n'ai pas d'autre idée mais la querystring "foo=bar&foo2=bar2" devrait quand même fonctionné même si c'est un peut plus "chiant" à la longue... 

@MorelMintsa Bonsoir, merci de ne pas déterrer d'ancien sujet pour une nouvelle question, créer votre propre sujet.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

Je ferme ici.