Content-Type请求头的四种常见类型:multipart/form-data,application/x-www-form-urlencoded,application/json,text/plain

1.前端要把数据发送到服务器,一般有两种方式:通过form表单提交;通过Ajax(xhr对象)发送。

2.通过Ajax(xhr对象)发送数据时,发送的数据的形式可以为FormData对象或json字符串。

3.通过这两种方式发送数据时,常见的Content-Type请求头的值如下:

Content-Type的值 form表单   Ajax(xhr)
multipart/form-data 可以通过enctype属性设置 发送的数据形式为FormData时的默认值
application/x-www-form-urlencoded 默认。即未设置enctype属性时的默认值 可以通过setRequestHeader方法设置
application/json 不支持。可以通过enctype属性设置,但提交时会自动转为application/x-www-form-urlencoded 可以通过setRequestHeader方法设置
text/plain 可以通过enctype属性设置 发送的数据形式为字符串时的默认值。包括JSON.Stringify方法返回的json字符串

以上内容在Chrome浏览器与新版的Edge浏览器下测试。

注意:

1.如果需要上传文件到服务器,则必须使用multipart/form-data;

2.form表单中可以通过修改form元素的enctype属性值来修改Content-Type,其值可以取multipart/form-data,application/x-www-form-urlencoded,text/plain三者之一;

3.xhr中可以通过setRequestHeader来设置Content-Type,其值可以取上面表格显示的四种类型中的任何一种;

4.nodejs的Express框架中的body-parser中间件可以解析application/x-www-form-urlencoded,applicaion/json两种类型的值。当Content-Type的值为这两种类型时,提交上来的内容会被自动解析并放入req.body中;当Content-Type的值为multipart/form-data,text/plain时,提交的内容不会被自动解析,此时req.body为{};

5.服务器端接收不到前端提交上来的数据时,一个可能的原因是请求头的Content-Type值没有正确设置。

原文地址:https://www.cnblogs.com/ben-/p/14211719.html