Form Data与Request Payload的区别

前端开发中要想实现与后端的交互那就少不了要向后端提交数据或请求数据,这时传参的方式主要有两种:且这两种方式主要是通过改变请求头的Content-Type属性来实现的,一般请求默认使用application/x-www-form-urlencoded编码数据,此时传参形式为Form Data,如果是application/json或multipart/form-data的话,则传参形式为 request payload
的方式。

Content-Type是指http/https发送信息至服务器时的内容编码类型,contentType用于表明发送数据流的类型,服务器根据编码类型使用特定的解析方式,获取数据流中的数据。

常用的Content-Type有如下:

text/html, text/plain, text/css, text/javascript, image/jpeg, image/png, image/gif,
application/x-www-form-urlencoded, multipart/form-data, application/json, application/xml

其中:text/html, text/plain, text/css, text/javascript, image/jpeg, image/png, image/gif, 都是常见的页面资源类型。

application/x-www-form-urlencoded, multipart/form-data, application/json, application/xml 这四个是ajax的请求,表单提交或上传文件的常用的资源类型。

方式一: 通过Form Data形式传参
ContentType都是默认的值 application/x-www-form-urlencoded, 这种编码格式的特点是:name/value值对,
每组之间使用&连接,而name与value之间是使用 = 连接,比如 key=xxx&name=111&password=123456;

1.jpg
后端可以通过request.getParameter(name)的形式来获取表单参数。

方式二: 通过Request Payload形式传参
application/json是以json形式将数据发送给服务器,对于一些复制的数据对象,对象里面再嵌套数组的话,建议使用application/json传递比较好

2.jpg
后端可以使用getRequestPayload方法来获取。

注意
当请求头的Content-Type为application/json时浏览器认为该请求为复杂请求,这时浏览器会先进行一次预请求,执行一次OPTIONS 请求,向服务器求证该请求是否合法,如果服务器没有给出正确回应浏览器会报跨域请求导致请求失败

一般这三种方式会导致这种现象:

1:请求的方法不是GET/HEAD/POST

2:POST请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain

3:请求设置了自定义的header字段