一、概念介绍

1.POST请求：HTTP/1.1协议中指定的HTTP请求方法包括OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE和CONNECT。POST通常用于向服务器提交数据。

2.内容类型：指http/https向服务器发送信息时的内容编码类型。Content-Type用于指示发送的数据流的类型，服务器根据编码类型使用特定的解析方法来获取数据流中的数据。开机自检请求有四种常见的内容类型数据类型：

application/x-www-form-URL encoded multipart/form-data application/jsontext/XML 3，express.js: express是Node.js Web应用的一个灵活的开发框架，可以为Web和移动应用提供一套强大的功能。

本文主要介绍了Post请求的四种Content-Type数据类型，以及如何使用Express解析每种Content-Type类型。完整的代码示例已经上传到github。github的地址是：https://github.com/fengshi123/request_example.欢迎来到星空。

二、四个开机自检请求的内容类型数据类型分析

1、申请/x-www-form-unincode

在POST中提交数据的最常见方式是浏览器的本机形式。如果未设置enctype属性，数据将默认以application/x-www-form-URL encoded的形式提交。

1.1.前端请求代码

var reqParam=' name=jackxhr . setrequestheader(' Content-type '，' application/x-www-form-URL encoded ')；xhr . send(ReqParam)；1.2、服务器解析代码

App.post ('/urlencoded '，body parser . URL encoded({ extend : true })，function (req，RES){ var result={ name : req . body . name，sex:' male '，age : 15 }；res.send(结果)；});1.3浏览器请求/响应截图

请求：

回应：

2、多部分/表单数据

使用表单上传文件时，必须指定表单的enctype属性值为multipart/form-data。请求体分为多个部分，每个部分由- boundary划分，后面是内容描述信息，最后是字段的具体内容(文本或二进制)；如果传输文件，还应包括文件名和文件类型信息；

2.1.前端请求代码

var req param=new form data(document . form 2)；xhr . send(ReqParam)；2.2、服务器解析代码

Express提供了两种插件，即强大插件和多方插件来处理多部分/表单数据类型。我们将使用下面的两个插件来处理它。

2.2.1.强大的插件

(1)安装插件

NPM安装强大-保存(2)服务器端解析处理

app.post('/formData1 '，function (req，RES){ var form=new eagle。IncomingForm()；form . uploaddir=' upload/'；form.parse(req，function (err，fields，file)){ var obj={ }；Object.keys(字段)。forEach(函数(名称){ obj[name]=field[name]；});Object.keys(文件)。forEach(函数(名称){ if (files[name] files[name])。name){ obj[name]=files[name]；fs.renameSync(文件[名称]。路径，form.uploadDir文件[名称]。姓名)；} });RES . send(obj)；});});2.2.2.多方插件

(1)安装插件

Npm安装多方保存(2)服务器解析处理

App.post ('/formdata2 '，函数(req，RES){//解析文件并上传var form=new多方。form()；//设置并编辑form . encoding=' utf-8 '；//设置文件存储路径form . uploaddir=' upload/'；//设置单个文件大小限制form . maxfiles size=2000 * 1024 * 1024；form.parse(req，function (err，fields，file)){ var obj={ }；Object.keys(字段)。forEach(函数(名称){ obj[name]=field[name]；});Object.keys(文件)。forEach(函数(名称){ if(files[name]files[name][0]files[name][0]。original filename){ obj[name]=files[name]；fs.renameSync(文件[名称][0])。路径，form.uploadDir文件[名称][0]。original filename)；} });RES . send(obj)；});});2.3浏览器请求/响应截图

请求：

回应：

3、应用/json

Content-Type应用程序/json用作响应头，告诉服务器消息体是一个序列化的json字符串。由于JSON规范的普及，除了低版本IE之外的所有浏览器都是原生支持JSON.stringify的，服务器语言也有处理JSON的功能，所以使用JSON不会有什么麻烦。

3.1.前端请求代码

var RegParam={ name : ' jack ' }；xhr . setrequestheader(' Content-type '，' application/JSON ')；xhr . send(JSON . stringify(ReqParam))；3.2、服务器解析代码

App.post ('/applicationjson '，bodyparser.json()，function (req，RES){ var result={ name : req . body . name，sex:' male '，age : 15 }；res.send(结果)；});3.3浏览器请求/响应截图

请求：

回应：

4、文本/xml

它是一个以HTTP为传输协议，以XML为编码方式的远程调用规范。它的应用也很广泛，可以很好地支持现有的XML-RPC服务。但是XML结构还是过于臃肿，JSON在一般场景下更加灵活方便。

4.1.前端请求代码

var text='？xml版本='1.0 '？methodCallmethodNameexamples.getStateName/methodName' ' paramsparamvaluei 441/i4/value/param/params/method call '；xhr . setrequestheader(' Content-type '，' text/XML ')；xhr.send(文本)；4.2、服务器解析代码

app.post('/textXml '，BodyParser . URL encoded({ extend : true })，function (req，RES){ var result=' '；req.on('data '，function(chunk){ result=chunk；});req.on('end '，function(){ RES . send(result)；});});4.3浏览器请求/响应截图

请求：

回应：

三、踩坑总结

1.对于跨域请求，当contentType更改为application/json时，会触发浏览器向服务器发送一个preview OPTIONS请求，然后发送一个普通的post请求。

2.使用新的表单数据()，然后将内容类型设置为application/x-www-form-URL encoded或multipart/form-data将导致后端无法正常解析。解决方法：不设置表头，内容类型默认为多部分/表单数据，服务器正常解析；

3.当contentType设置为application/x-www-form-URL encoded时，发送到后端的请求参数为JSON字符串，chrome调试框检查发送的请求参数是否有更多的冒号，如下所示：

这是因为application/x-www-form-URL encoded将被解析为键值对进行呈现，但是字符串不会改变，但是在呈现过程中可以看到。解决方法：如果是JSON字符串，将数据类型设置为application/JSON；

四.摘要

本文主要介绍了Post请求的四种Content-Type数据类型，以及如何使用Express解析每种Content-Type类型。完整的代码示例已经上传到github。github的地址是：https://github.com/fengshi123/request_example.欢迎来到星空。演示截图如下：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。