http请求时Form Data & Request Payload的区别

Posted 2023-03-03

参考技术A 在与后端的调试中发现一个问题，使用post发请求时，发送的params后端一直说没收到参数，F12发现参数确确实实已经发送了。如图：

使用swagger发送同样的参数请求却可以接收到：

通过比对发现，两者的不同在于一个参数类型是Form Data，一个是Request Payload。什么意思呢？

百度一下 你就知道

Request Payload更准确的说是http request的payload body。一般用在数据通过POST请求或者PUT请求。它是HTTP请求中空行的后面那部分。（PS:这里涉及一个http常被问到的问题，http请求由哪几部分组成，一般是请求行，请求头，空行，请求体。payload body应该是对应请求体。）

一个请求伴随着header设置为Content-Type: application/json时，参数看起来是这样的：

POST /some-path HTTP/1.1 Content-Type: application/json "foo" : "bar", "name" : "John"

如果你只是正常的请求一个ajax请求，浏览器是会把你提交的params作为Payload展示出来，因为他也不知道params来自哪里。

但如果你提交的请求设置了method="POST" 并且header设置了Content-Type: application/x-www-form-urlencoded或者Content-Type: multipart/form-data，那么你的请求看起来就是下面这样的，类似GET请求里的参数拼接：

POST /some-path HTTP/1.1 Content-Type: application/x-www-form-urlencoded foo=bar&name=Jack

这里的form data就是request payload，在这里浏览器知道的更多：他知道bar是表单foo的值Jack是name的值，所以这里做了展示。

在回到之前的问题，通过观察图片发现，两者的区别确实是因为header中Content Type的值设置不同导致的：

通过查看request.js证实了这个验证：

解决办法：

在请求中，设置一个header即可