Express 4.x中间件methodOverride的详细解析

最新推荐文章于 2024-09-01 07:13:24 发布

sunq1982

最新推荐文章于 2024-09-01 07:13:24 发布

阅读量636

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript node-js express 文章标签： express 中间件服务器 node-js

本文链接：https://blog.csdn.net/sunq1982/article/details/77542944

javascript 同时被 3 个专栏收录

26 篇文章

订阅专栏

node-js

11 篇文章

订阅专栏

express

8 篇文章

订阅专栏

本文介绍了Express 4.x框架中的methodOverride中间件，用于解决客户端不支持PUT、DELETE等HTTP方法时，如何在服务器端进行请求方法转换的问题。通过实例展示了在HTML表单和Ajax请求中如何配合methodOverride实现正常通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

methodOverride用于当服务器端运用put, delete这种方法，而客户端不支持的情况之下，对请求方法进行转换从而能够保持通讯能够成功的办法。

假设服务端用的是put方法的话，值得注意的是在form的属性里面需要这么写。

action="index1.html?_method=PUT"

首先看下客户端html的这个表单提交：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Express Post method</title>
</head>

<body>
    <form id="form1" , method = "POST" action="index1.html?_method=PUT">
        firstname:<input type="text" , name="firstname" , value="ss" /><br/> lastname:
        <input type="text" , name="lastname" , value="ll" /><br/>
        <input type="submit" value="submit" />
    </form>
</body>

</html>

来看看服务器端：

var express = require('express');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var app = express();
app.use(bodyParser.urlencoded({ extended: false}));
app.use(methodOverride('_method'));//在bodyParser之后，并且指明对表单_method进行override
app.get('/index1.html', function (req, res) {
    res.sendFile(__dirname + '/index1.html');
});

app.put('/index1.html', function (req, res) {
    res.send(req.body);
});//用的是put方法
app.listen(1338);

运行之后，检查浏览器localhost:1338端口的输出结果：

这里写图片描述

虽然服务器端接收和客户端申请方法不匹配，但是由于用了methodOverride中间件，照样可以顺利通信。

小伙伴们还是喜欢用ajax, 用ajax的时候要加上这一句。

xhr.setRequestHeader('X-HTTP-Method-Override', 'PUT');

咱们来搭配formData走一次。

下面是客户端html文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function submitData() {
            var form = document.getElementById('form1');
            var formData = new FormData(form);
            var xhr = new XMLHttpRequest();
            xhr.open('post', 'indexFormData.html', true);
           xhr.setRequestHeader('X-HTTP-Method-Override', 'PUT');
            xhr.onload = function (e) {
                if (this.status == 200) {
                    document.getElementById('result').innerHTML = this.response;
                }
            };
            xhr.send(formData);
        }
    </script>
</head>

<body>
    <form id="form1" enctype="multipart/form-data">
        firstname:
        <input type="text" name="firstname" id="txtFirstName" value="ss"></br>
        lastname:
        <input type="text" name="lastname" id="txtLastName" value="ll"></br>
        <input type="button" value="submit" onclick="submitData()" />
    </form>
    <output id="result"></output>
</body>

</html>

接下来是服务端代码：

var express = require('express');
//var bodyParser = require('body-parser');
var multer = require('multer')().single();//运用multer中间件来接收客户端表单信息。这是一种快捷的简略写法，不建议这么写，不过这里不介绍你，所以为了省事。
var methodOverride = require('method-override');
var app = express();
app.use(multer);//运用multer这个中间件

//需要注意的是，bodyParser这个中间件不接受formData格式传过来的数据。
//我之前在学bodyParser的时候踩过这个坑，转不出来。
//后来去github官网上提了这个问题，结果得到了确定的回答
//就是，确实确实不支持！
//并且得到对方的鼓励让我写一个，可惜我是个业余的，还是先把把框架学好再说吧。

//app.use(bodyParser.urlencoded({ extended: false}));

app.use(methodOverride('X-HTTP-Method-Override'));//需要这么设置，必须和ajax的头部信息一样。
app.get('/indexFormData.html', function (req, res) {
    res.sendFile(__dirname + '/indexFormData.html');
});

app.put('/indexFormData.html', function (req, res) {
    res.send(req.body);
});
app.listen(1338);