Salut tout le monde, un soucci s'il vous plaît. Un soucci avec le quizz savez vous implementer le CRUD ? sur le cours passer au fullstack avec nodeJs, Express et mongoDB. J'essaie, mais lorsque je veux vérifier, toujours une erreur 404 dans la console, et je n'ai jusqu'ici pas encore réussi à la resoudre. Voici mon code, au cas où ca pourra aider quelqu'un à m'aider 🙏

Et voici l'erreur associée

Bonjour de mon côte pour la deuxième capture d'écran qui selon l'intitulé correspond à l'erreur que tu reçoit ne s'affiche pas à la place j'ai une image d'un avatar par "défaut" (j'ai cette image là) mais j'imagine que la capture d'écran doit contenir le message par défaut de l'erreur 404 de express,

où un message d'erreur provenant de ton terminal qui indique quelque chose du genre, tu à essayé de renvoyé des en têtes HTTP pour une requête qui à déjà été fermé.

Le fait que le code que tu as posté et situé dans une image empêche de le reprendre pour le testé et/où pour le modifié afin d'apporté des idées de solution.

Si tu peut ré édité ton messages et utilisé le bouton </> du forum afin de posté le code sous un format texte ça aiderait à t'aidé. 

Visuellement le problème vient du code de tes routes, tu ne devrait pas appelé la méthode next() lorsque ta route renvoie une réponse au client par ce que le middleware suivant va lui aussi essayé de renvoyé une réponse au client, dans ton cas ces le middleware par défaut de express qui renvoie une erreur 404 au client (ces le dernier middleware exécuté lorsque aucune réponse n'a été renvoyé).

app.get('/api/products', (req, res, next) => {

    Thing.find()
    .then((product) => {
        // ici tu as reçu le produit
        // tu devrait la retourné au client
        res.status(200).json(product);
    })
    .catch((error) => {
        // ici tu as reçu une erreur

        // ici tu essaies de récupéré tous les produits
        // en cas d'erreur ce n'est certainement pas une erreur 404 Not Found
        // c'est une erreur interne à mongo db une error 500 Internal Server Error (car le client n'y peut rien)
        // éventuellement une error 502 Gateway Error (car ton serveur sert de passerelle entre mongo db et le client)
        // lorsque c'est un service externe à ton serveur qui à échoué tu peut renvoyé une erreur 502 au lieu d'une erreur 500
        
        // devrait être un status code 500 où 502
        res.status(404).json(error);
    })

    // si tu appel la méthode next ici tu demande au middleware suivant d'être executé
    // étant donné que tu renvois une réponse dans ce middleware là (les routes sont toutes des middlewares avec express)
    // tu ne devrait pas appelé le middleware suivant
    // tu donne la main au middleware suivant uniquement si tu n'a aucune réponse à renvoyé au client
    // ici le problème que ça provoque ces que comme tu n'as aucun middleware suivant pour cette route
    // ces le middleware par défaut des erreur 404 de express qui ce déclenche et qui renvoie une réponse 404 au client
    // et lorsque ta requête réseaux vers mongo db seras résolu tu essayeras de renvoyé une deuxième réponse via:
    // `res.status(200).json(product);` ce qui provoqueras une erreur (non visible sur la page web) visible dans les
    // logs de ton terminal, qui diras en gros que tu à essayé de renvoyé des en têtes HTTP pour une requête qui à déjà été fermé.
    next();
})

En principe tu devrais pouvoir réglé le problème en enlevant l'appel à la méthode next dans toutes routes (puisque elle renvoie toutes une réponse) elle n'ont pas besoin d'appelé le middleware suivant car émettre une réponse ferme la requête HTTP.

app.get('/api/products', (req, res, next) => {

    Thing.find()
    .then((product) => {
        // ici tu as reçu le produit
        // tu devrait la retourné au client
        res.status(200).json(product);
    })
    .catch((error) => {
        // ici tu as reçu une erreur

        // ici tu essaies de récupéré tous les produits
        // en cas d'erreur ce n'est certainement pas une erreur 404 Not Found
        // c'est une erreur interne à mongo db une error 500 Internal Server Error (car le client n'y peut rien)
        // éventuellement une error 502 Gateway Error (car ton serveur sert de passerelle entre mongo db et le client)
        // lorsque c'est un service externe à ton serveur qui à échoué tu peut renvoyé une erreur 502 au lieu d'une erreur 500
        
        // devrait être un status code 500 où 502
        res.status(404).json(error);
    });
})

Merci beaucoup déja pour ton aide SamuelGaborieau3 🙏

J'ai enlevé la méthode next() de toutes mes routes, mais cette fois ci, l'inspecteur n'affiche aucune erreur, mais l'exercice n'est toujours pas validé. C'est cependant mieux qu'auparavant, car cette fois au moins, ca me précise quand meme que la requete de creation de produit a été un succès. Bref, voici ci dessous, une capture dans mon navigateur, et aussi le code utilisé.

Le code premièrement :

const express = require('express');
const app = express();
const mongoose = require('mongoose');
const Thing = require('./models/thing');

mongoose.connect('mongodb+srv://mongoUserName:mongoPassword@cluster0.txr0m.mongodb.net/myFirstDatabase?retryWrites=true&w=majority',
  { useNewUrlParser: true,
    useUnifiedTopology: true })
  .then(() => console.log('Connexion à MongoDB réussie !'))
  .catch(() => console.log('Connexion à MongoDB échouée !'));

app.use(express.json());
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
  next();
});

app.get('/api/products', (req, res, next)=>{
    Thing.find()
        .then((product)=>res.status(200).json(product))
        .catch(error => res.status(400).json({error}));
});

app.get('/api/products/:id', (req, res, next)=>{
    Thing.findOne({_id: req.params.id})
        .then((product)=>res.status(200).json(product))
        .catch(error => res.status(400).json({error}));
});

app.post('/api/products', (req, res, next)=>{
    delete req.body._id;
    const thing = new Thing({
        ...req.body
    });
    thing.save()
        .then((product)=>res.status(201).json({ product }))
        .catch(error => res.status(400).json({error}));
});

app.put('/api/products/:id', (req, res, next)=>{
    Thing.updateOne({_id: req.params.id}, {...req.body, _id: req.params.id})
        .then(()=>res.status(200).json({message: 'Modified!'}))
        .catch(error => res.status(404).json({error}));
});

app.delete('/api/products/:id', (req, res, next)=>{
    Thing.deleteOne({_id: req.params.id})
        .then(()=>res.status(200).json({message: 'Deleted'}))
        .catch(error => res.status(404).json({error}));
});

module.exports = app;

Et ensuite, le resultat affiché dans le navigateur : (A titre de rappel s'il vous plait, il s'agit de cet exercice Quiz : Savez-vous implémenter le CRUD ?)

Je disais tantôt, voici le nouveau resultat affiché dans le navigateur, après avoir enlevé les méthodes next() de mes routes :

Merci d'avance 🙏

Bonjour le message d'erreur sur l'interface à l'air de dire qu'une requête Javascript à échoué, bizzarement car tu n'as aucun log d'erreur dans ta console..

Est-ce que c'est une requête qui partait vers GET /api/products qui à échoué ?

Ton infertace et situé sur le port 8081 j'imagine que ton API tourne sur le 8080 est-ce que lorsque tu entre directement l'url de ton navigateur l'adresse vers:

http://localhost:8080/api/products

Tu reçois la liste des produits où une erreur ?
Ton code côté serveur à l'air valide maintenant surtout si tu n'as plus aucune erreur dans ton terminal.

Si le problème persiste c'est que l'erreur vient de ton fichier client il nous faudra la source du code javascript qui consomme l'API.

Dans la console de développement que tu a ouvert dans ton navigateur tu peut passé sur l'onglet Réseau puis sur la colonne XHR/Fetch pour voir le requêtes réseaux qui ont été envoyé depuis javascript voir leur status et voir la réponse du serveur directement dans la console, cela peut aidé à debuggé les requête réseaux, il faut ouvrir la console de développement avant que la requête réseaux soit envoyé sinon des fois il n'y as pas de trace de la requête dans l'onglet réseaux de la console, dans ce cas il faudra rechargé la page pour que la requête soit ré envoyé.

VVoici le resultat de la partie réseau, aucune erreur signalée...

et lorsque j'essaie d'acceder au lien que vous avez proposé sur votre dernier message, c'est une erreur qui s'affiche, pas la liste de produits.

Peut etre qu'en suivant le cours j'ai négligé un truc, je vais le reprendre depuis le début, en le lisant plus attentivement

D'accord, vous avez quel erreur? lorsque vous allé sur la page

http://localhost:8080/api/products

Est-ce que votre serveur d'API et bien sur le port 8080 sinon il faut changé le port que j'ai écris par le port de votre serveur d'API,

le fait d'entré directement l'URL de la route pour /api/products dans l'URL servait à vérifiait directement que l'API renvoi les bonnes données,

dans la capture d'écran il n'y que des status 200.

Tu peut cliqué sur les entrées des requêtes pour les inspecté, cela ouvrir un panel avec un bouton Réponse qui permet de voir la réponse que le serveur à renvoyé, et donc de voir si les données sont valide.

Etant données que tu n'as que des status 200 dans tes requêtes réseaux et que le code côté serveur à l'air valide,

je commence fortement à pensé que ces un bug d'affichage issue de ton code côté client (peut-être le code qui consomme l'API du serveur)

plutôt qu'une erreur côté serveur. Est-ce que tu peut nous montré le où les fichier côté clients qui affiche ce message d'erreur ?

Surtout la partie Javascript qui détecte cette erreur et insère l'erreur dans le document.

Effectivement si ton cours propose un corrigé de l'exercice où fournit le code source cela peut aussi t'aidé à debuggé ton code.

-
Edité par SamuelGaborieau3 30 novembre 2021 à 10:57:36

Bonsoir Bonsoir 🙃

Problème resolu 😁, en effet, le après le retrait des middlewares next(), c'est déja preque tout à fait OK.

En fait, si j'ai bien compris, pour valider, il fallait utiliser les réponses aux requetes, telles qu'ils l'avaient proposé dans l'enoncé. Donc dans mes retours 'res.status(***).json(***)', j'ai mis en paramètres dans la méthode json exactement ce qu'ils avaient proposé dans l'énoncé, pour ce qui est des requetes GET et POST en tout cas. (Je pensais au départ qu'ils donnaient cela juste à titre d'exemple, ou d'indication,... Quelque chose du genre en fait).

Mais bon, maintenant c'est OK. Merci à toi SamuelGaborieau3 pour ton aide et ta disponibilité 🙏