Why do I get a 404 status to my PUT and DELETE requests?

Question

I am working on a MEN back-end app and in my in express client router I declared PUT and DELETE request but they show a status 404 not found. although the POST request is working just fine Is it a method-override error or else??

this is my client.js router

//Librairies à appeler
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const router = express.Router();
const path = require("path");
const mongoose = require("mongoose");
const methodOverride = require("method-override");

//modèles à appeler
const Client = require("../models/client");
const Dossier = require("../models/dossier");

//Créer application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: true });

//Usage de forçage de méthode CRUD dans un formulaire HTML
app.use(express.urlencoded({ extended: true }));
app.use(methodOverride("_method"));

/* _______________________________________SECTION CLIENTS________________________________________ */

// Interface de liste des clients
router.get("/", async (req, res) => {
  const clients = await Client.find({});
  res.render("clients/index", { clients });
});

// Ajout d'un client
router.get("/new", (req, res) => {
  res.render("clients/new");
});

router.post("/", urlencodedParser, async (req, res) => {
  const newClient = new Client(req.body);
  await newClient.save();
  console.log(newClient);
  res.redirect(`/clients/${newClient._id}`);
});

// Interface d'un client d'id spécifique
router.get("/:id", async (req, res) => {
  const { id } = req.params;
  const client = await Client.findById(id);
  console.log(client);
  res.render("clients/show", { client });
});

// Modification d'un client
router.get("/:id/edit", async (req, res) => {
  const { id } = req.params;
  const client = await Client.findById(id);
  res.render("clients/edit", { client });
});

router.put("/:id", urlencodedParser, async (req, res) => {
  const { id } = req.params;
  const client = await Client.findByIdAndUpdate(id, req.body, {
    runValidators: true,
    new: true,
  });
  console.log(req.body);
  res.redirect(`/clients/${client._id}`);
});

// Supression d'un client
router.delete("/:id", async (req, res) => {
  const { id } = req.params;
  const FoldersToDelete = await Dossier.find({ client: id });
  for (let i = 0; i < FoldersToDelete.length; i++) {
    await Dossier.deleteOne(FoldersToDelete[i]);
  }
  const deletedClient = await Client.findByIdAndDelete(id);
  res.redirect("/");
});

// Export du routeur client
module.exports = router;

and this is my main app index.js where I called the routers and ran the server

//Librairies à appeler
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const path = require("path");
const morgan = require("morgan");
const mongoose = require("mongoose");
const methodOverride = require("method-override");

//routes à ajouter
//  pour la db clients
const clientRouter = require("./routes/client");
app.use("/clients", clientRouter);
//  pour la db dossiers
const dossierRouter = require("./routes/dossier");
app.use("/dossiers", dossierRouter);
//  pour la db users
const userRouter = require("./routes/user");
app.use("/", userRouter);

//Connection à la base de donnée
mongoose
 .connect("mongodb://localhost:27017/ProjetDB", {
   useNewUrlParser: true,
   useUnifiedTopology: true,
 })
 .then(() => {
   console.log("MONGO CONNECTION OPEN!!!");
 })
 .catch((err) => {
   console.log("OH NO MONGO CONNECTION ERROR!!!!");
   console.log(err);
 });

//établissement de la template dynamique et du PATH
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

//Usage de forçage de méthode CRUD dans un formulaire HTML
app.use(express.urlencoded({ extended: true }));
app.use(methodOverride("_method"));

//Usage du middleware morgan pour affocher le statut et le type de requette effectuée
app.use(morgan("dev"));

/*_________________________________ACTIVATION DU SERVEUR EXPRESS__________________________________*/

app.listen(5000, () => {
 console.log("APP IS LISTENING ON PORT 5000!");
});

Answer 1

Actually, I declared the use for the method-override use after declaring the routes in the index.js file. As a result, the PUT and DELETE requests weren't found

To fix the issue, we must change the order inside index.js file as the following

//Usage de forçage de méthode CRUD dans un formulaire HTML
app.use(express.urlencoded({ extended: true }));
app.use(methodOverride("_method"));

//Routes à ajouter
//  pour la db clients
const clientRouter = require("./routes/client");
app.use("/clients", clientRouter);
//  pour la db dossiers
const dossierRouter = require("./routes/dossier");
app.use("/dossiers", dossierRouter);
//  pour la db users
const userRouter = require("./routes/user");
app.use("/", userRouter);

Instead of

//Routes à ajouter
//  pour la db clients
const clientRouter = require("./routes/client");
app.use("/clients", clientRouter);
//  pour la db dossiers
const dossierRouter = require("./routes/dossier");
app.use("/dossiers", dossierRouter);
//  pour la db users
const userRouter = require("./routes/user");
app.use("/", userRouter);

//Usage de forçage de méthode CRUD dans un formulaire HTML
app.use(express.urlencoded({ extended: true }));
app.use(methodOverride("_method"));