Request Payload是什么

发表于 | 分类于 ，

在监控请求提交的数据的时候，应该注意到有的时候数据提交部分的名称是：Request Payload，而不是我们熟悉的QueryString和FormData。什么是Request Payload，以及它与Query String和Form Data是什么关系和区别呢？

Request Payload

Query String

Form Data

Query String其实非常简单，就是把url中的参数解析在这个位置。不管是url里面本身包含的searchParams，还是http请求通过get方法额外设置的数据，最终都会以url query的形式进行传输。 开发者工具是非常明确这部分数据的类型和来源的，所以把这种数据划分在一个名叫Query String的部分来展示，方便开发人员查看。

剩下两个要从form元素的enctype说起。enctype有三个属性值：

  • application/x-www-form-urlencoded 默认值。将请求提交的数据按照url编码之后再传递。
  • multipart/form-data 这个请求数据进行编码，表单内有文件上传时使用。
  • text/plain 空格转换为加号，其它数据原封不动地进行传递。

当表单的method属性设置为get时，enctype没有啥作用，这是因为get等价于意味着http的get方法，它的数据是放在url中传递的，所以enctype没有效果。

为了看到enctype的作用，可以选择post方法来测试。

测试1 post + application/x-www-form-urlencoded
1
2
3
4
5
<form action="http://liuyunzhuge:3000/post" method="post" enctype="application/x-www-form-urlencoded">
    <input type="text" name="name">
    <input type="file" name="image">
    <input type="submit" value="提交">
</form>


从图可以看到，这个时候开发者工具显示的是Form Data，并且通过查看Form Data原始数据，可以看到数据是经过了url编码处理的。

测试2 post + multipart/form-data
1
2
3
4
5
<form action="http://liuyunzhuge:3000/post" method="post" enctype="multipart/form-data">
    <input type="text" name="name">
    <input type="file" name="image">
    <input type="submit" value="提交">
</form>


从图可以看到，这个时候开发者工具显示的是Form Data，并且通过查看Form Data原始数据，可以看到数据是未经过url编码处理的。

测试3 post + text/plain
1
2
3
4
<form action="http://liuyunzhuge:3000/post" method="post" enctype="text/plain">
    <input type="text" name="name">
    <input type="submit" value="提交">
</form>


从图可以看到，这个时候开发者工具显示的是Request Payload，并且其中展示的数据不再有可交互的特性，只是直白的字符展示。

综合以上所述，可以发现：

  1. 当form使用post方法，并且enctype设置为application/x-www-form-urlencoded或multipart/form-data时，开发者工具会按Form Data来显示数据，并且数据有两种查看方式：按原始的方式和按解析好的方式。
  2. 当form使用post方法，并且enctype设置为text/plain时，开发者工具会按Request Payload来显示数据，数据只有1种查看方式。

再进一步思考，form的提交，本质上是发起新的http请求，而enctype最终影响的其实也就是http请求。 综合以上的例子，还可以发现enctype与http请求中的Content-Type请求头有一定的关联：

  • 当enctype为application/x-www-form-urlencoded的时候，对应的http的content-type请求头是：application/x-www-form-urlencoded
  • 当enctype为multipart/form-data的时候，对应的http的content-type请求头是：multipart/form-data; boundary=----...
  • 当enctype为text/plain的时候，对应的http的content-type请求头是：text/plain

所以开发者工具里数据部分是显示为Request Payload还是Form Data，实质上跟content-type请求头有关系：

  • 当content-type请求头是application/x-www-form-urlencoded或者multipart/form-data; boundary=----...，开发者工具显示的就是Form Data
  • 当content-type是其它值，比如text/plain、application/json等，开发者工具就显示为Request Payload。

在使用axios发请求的时候，就经常能看到application/json下显示出的Request Payload：

为什么要分为这三种呢？跟它们各自含义有关系：

  1. Query String 代表的是url中的查询参数，所以这个部分可能与Request Payload和Form Data共存
  2. Form Data 代表的是内容类型固定的请求数据
  3. Request Payload 代表的是内容类型未知的请求数据

所以在开发者工具中，Query String和Form Data都有两种查看数据的方式，view source和view parsed，因为浏览器知道这个时候的请求数据是什么格式的；而对于Request Payload，浏览器则不知道请求体里是什么数据。