Partage
  • Partager sur Facebook
  • Partager sur Twitter

Express impossible de recevoir les datas d'un POST

14 avril 2022 à 10:22:43

Bonjour,

je suis actuellement en train de suivre le cours "Passez au Full Stack avec Node.js, Express et MongoDB" sur Openclassrooms mais je suis coincé au niveau de la partie 6 : "Créez une route POST".

En effet, je pense avoir suivit à la lettre chaque instruction du cours mais l'erreur suivante ressort lorsque j'envoie le form fournis pas le cours :

"Form submission canceled because the form is not connected".

Je ne veux pas modifier le form en question puisqu'il est dans le node_modules mais je n'ai pas d'autre idée pour régler ce problème.

Voici la partie de code concernant la requête POST (qui provient lui aussi du cours): 

app.post('/api/stuff', (req, res, next) => {
    console.log('test');
    console.log(req.body);
    res.status(201).json({
        message: 'Objet créé !'
    });
});

Est-ce que quelqu'un peut m'aider?

Merci d'avance.

  • Partager sur Facebook
  • Partager sur Twitter
18 mai 2022 à 22:38:48

Salut, j'arrive peut être un peu tard, il te faut utiliser bodyParser 

const bodyParser = require('body-parser')


et l'appliquer à ton serveur express

app.use(bodyParser.json({limit: '10mb', extended: true}))
app.use(bodyParser.urlencoded({limit: '10mb', extended: true}))
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

Sinon tu pourras pas récupérer tes données en json depuis ton front

sinon ta route a l'air correcte 

++

  • Partager sur Facebook
  • Partager sur Twitter
19 mai 2022 à 15:55:10

@ArthurLagneaux Pour ton problème, il s'agit d'un blocage côté client. Le navigateur interdit apparemment d'envoyer la requête car le formulaire ne semble pas relié au DOM actuel.

Sans autres détails, je ne peux t'en dire plus malheureusement. As-tu essayé de chercher l'erreur sur Google ?

Grégoire-M a écrit:

Salut, j'arrive peut être un peu tard, il te faut utiliser bodyParser 

const bodyParser = require('body-parser')


et l'appliquer à ton serveur express

app.use(bodyParser.json({limit: '10mb', extended: true}))
app.use(bodyParser.urlencoded({limit: '10mb', extended: true}))
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

Sinon tu pourras pas récupérer tes données en json depuis ton front

sinon ta route a l'air correcte 

++

Il n'y a absolument pas besoin de bodyParser qui est intégré à Express depuis la v4.16.

De plus, si les données sont envoyées avec le header Content-Type: application/json il n'y a pas besoin non plus d'utiliser le middleware urlencoded(…).
express.json() suffit.

  • Partager sur Facebook
  • Partager sur Twitter
30 mai 2022 à 20:08:34

Bonjour, 

Je suis confronté à un problème similaire, je ne comprend pas pourquoi malgré que j'ai reprit le cours au début du chapitre et même avant.

J'en suis au chapitre 2 partie 3

mon message d'erreur dans la console est le même: "Form submission canceled because the form is not connected "

Cette erreur intervient dès que j'essaie de créer un article ou d'en visualiser un.

mon serveur backend me dit bien qu'il est connecté à MongoDB, j'ai deux théorie, la première me parait peu probable est que le cors n'est pas activé sur mon serveur front comme l'indique ma console :

Starting up http-server, serving .

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Unhandled requests will be served from: http://local"host:4200?

l'autre est qu'il manque un Event.preventDefault() coté front sur l'event onClick() du boutton mais impossible de lire  correctement le code pour tenter de modifier.

N'hésitez pas a me redemander des extraits de code, je ne voulais pas mettre tout ici ne sachant pas exactement où se situe le problème

-
Edité par CyzBot 30 mai 2022 à 20:13:57

  • Partager sur Facebook
  • Partager sur Twitter
10 juin 2022 à 18:13:13

je rencontre le même problème, l'un de vous à t'il pu trouver une solution ?
  • Partager sur Facebook
  • Partager sur Twitter
1 septembre 2022 à 11:48:00

Problème identique.
Je pense effectivement qu'il faut ajouter Event.preventDefault(), mais le code est illisible...
@OpenClassroom, pourriez-vous vérifier ?
  • Partager sur Facebook
  • Partager sur Twitter
2 septembre 2022 à 10:17:59

Bonjour,

Je pense que si vous ne pouvez pas le corriger c'st qu'ils vous ont donné à télécharger la version production (build) du front-end et non pas la version développement. Donc c'est illisible pour vous et vous ne pouvez rien comprendre. Si vous suivez ce cours dans le cadre d'un parcours pour une formation diplômante, demandez à votre mentor et aussi ne passez pas trop de temps dessus, l'important n'est de terminer l'application du cours mais celle de votre soutenance. Donc si vous comprenez le peu de logique expliqué dans le cours, c'est bon. Vous pouvez aussi prévenir les formateurs s'ils ne sont pas déjà au courant pour qu'ils corrigent le code front-end du cours en cas effectif d'oubli de leur part, mais s'ils sont déjà au courant, c'est juste qu'ils l'ont rajouté à leurs longues to-do list.

Cordialement

-
Edité par NathanaëlMarie-Louise 2 septembre 2022 à 12:53:21

  • Partager sur Facebook
  • Partager sur Twitter