Express Router .delete returns 404 Not Found? - mongodb

Question

Encountered a strange issue while using delete method in Express app.
Here is my app.js document. I am using elevatorRouter for "/elevators" routes.
app.js
app.use("/", indexRouter);
app.use("/users", usersRouter);
app.use("/passwordgenerator", passwordgeneratorRouter);
app.use("/elevators", elevatorRouter);
// catch 404 and forward to error handler
app.use(function (req, res, next) {
next(createError(404));
});
// error handler
app.use(function (err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get("env") === "development" ? err : {};
// render the error page
res.status(err.status || 500);
res.render("error");
});
module.exports = app;
Here is my route file. I am including the elevator router from app.js. It seems that edit route is working fine. I have only issue with "delete" method.
elevators.js
const express = require("express");
const router = express.Router();
const Elevator = require("../models/elevator");
const middleware = require("../middleware");
// Edit Elevator Route
router.get("/:id/edit", (req, res) => {
Elevator.findById(req.params.id, (err, foundElevator) => {
res.render("elevators/edit", { elevator: foundElevator });
});
});
// Delete Elevator Route
router.delete("/:id", (req, res) => {
Elevator.findByIdAndRemove(req.params.id, (err) => {
if (err) {
res.redirect("/elevators");
} else {
res.redirect("/elevators");
}
});
});
Here is my views. I didnt completely post the entire html. Instead, I have copied partially. I beleive this will be enough. I used postman to send "POST" method directly but still receiving the same 404 error. I beleive it is not related to the view
view
<div class="col-md-9">
<div class="card">
<img src="<%= elevator.image %>" class="card-img-top" alt="..." />
<div class="card-body">
<h4 class="card-title"><%= elevator.projectName%></h4>
<p><%= elevator.projectNumber %></p>
<% if(user) { %>
<form
class="delete-form"
action="/elevators/<%= elevator._id %>?_method=DELETE"
method="post"
>
<button class="btn btn-danger">Delete</button>
</form>
<% } %>
</div>
<div class="card-body">
Back
</div>
</div>
</div>

Answer 1

You cannot get response from a DELETE route with a POST HTTP request. It is a well-known issue of browsers, but HTML forms can only send FormData via POST and DELETE is not compatible.
Therefore, Express routing does not match and says POST:“/:id” route does not exist.
Try changing .delete to .post and it will work.
Edit: There is a method-overwrite module to convert POST requests to DELETE via a query param _method (or any other name you choose).