We know that html form only have 2 default methods GET and POST. But often times we need to work with other HTTP methods PUT, PATCH and DELETE. So I wanted to make a middleware funtion to override the method manually without using any npm packages.
This is a simple example of an Express.js application that demonstrates method override using a custom middleware. It uses middleware to parse URL and body and allows the HTTP method to be overridden by a _method parameter in the request body.
Before running this code, ensure that you have the following installed:
- Node.js
- Express.js
- EJS for view rendering (though you can choose another templating engine if you prefer)
-
Clone this repository or download the source code.
-
Open a terminal and navigate to the project directory.
-
Run the following command to install the required dependencies:
npm install
To run this Express application, follow these steps:
-
Start the server:
npm start -
The application will start and listen on port 4000. You can access it in your web browser at
http://localhost:4000.
// index.js
import Express from "express";
const app = Express();
app.use(Express.urlencoded({ extended: true }));
app.use(Express.json());
app.use((req, res, next) => {
if (req.body && req.body._method) {
console.log("Method override from POST to ", req.body._method);
req.method = req.body._method;
}
next();
});
app.get("/method", (req, res) => {
console.log("Request handler method is ", req.method);
res.redirect("/");
});
app.delete("/method", (req, res) => {
console.log("Request handler method is ", req.method);
res.redirect("/");
});
app.listen(4000, () => {
console.log("Server is listening to port http://localhost:4000.");
});View engine
<!-- index.ejs -->
<body>
<form action="/method" method="post">
<input type="hidden" name="_method" value="get" />
<button>GET METHOD</button>
</form>
<hr />
<form action="/method" method="post">
<input type="hidden" name="_method" value="delete" />
<button>DELETE METHOD</button>
</form>
<hr />
</body>See complete code in index.js file in src folder.
req: the request objectres: the response objectnext: the next middleware function
- The code snippet imports the Express module and creates an instance of the Express application.
- Middleware is added to parse the URL and body of incoming requests.
- Another middleware function is added to check if the request body contains a
_methodparameter. - If the
_methodparameter exists, the method override functionality is triggered by changing thereq.methodproperty to the value of the_methodparameter. - The code snippet defines a route handler for the
/methodendpoint, which logs the request method and redirects to the root page (/). - The server starts listening on port 4000.
The application uses the EJS template engine for rendering views. Views are stored in the ./src/views directory. The root page is rendered using the index.ejs template.
Dipankar Paul 😀 | Contact Me 👉 [email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent