request 中常见三种Content-Type区别

Content-Type

Content-Type 实体头部用于指示资源的MIME类型 media type 。
在响应中，Content-Type标头告诉客户端实际返回的内容的内容类型。浏览器会在某些情况下进行MIME查找，并不一定遵循此标题的值;
为了防止这种行为，可以将标题 X-Content-Type-Options 设置为 nosniff。

详细介绍可以查看MDN文档关于HTTP Headers介绍

这篇文章主要介绍是在requests Headers中设置不同Content-Type，后端对应不同处理方式

1. application/json

JSON是一种轻量级的数据格式，以“键-值”对的方式组织的数据。这个使用这个类型，需要参数本身就是json格式的数据，参数会被直接放到请求实体里，不进行任何处理。服务端/客户端会按json格式解析数据。

我个人比较喜欢这种传输方式，因为在前端中使用JSON存储数据使用非常常见，对象和JSON之间转换也比较容易，而且一些现代Ajax库默认请求头就是这种类型，无需再进行其他配置如axios.

前端请求

const = loginForm: {
        username: '123',
        password: '123'
      }
const { data: result } = await axios.post('login', loginForm)

后端接收

//Nodejs
exports.login = asyncHandler(async (req, res, next) => {
  let { username, password } = req.body})

#Python
json.loads(request.body.decode('utf8'))

2. application/x-www-form-urlencoded

HTTP会将请求参数用key1=val1&key2=val2的方式进行组织，并放到请求实体里面，注意如果是中文或特殊字符如"/"、","、“:" 等会自动进行URL转码。不支持文件，一般用于表单提交。

这种提交方式一般在原生form表单提交中比较常见,但是原生form表单可拓展性一般比较麻烦，所以现在一般做法是即使是这种传输方式，前端依旧还是会使用Object存储数据，在提交请求前进行序列化。

前端请求

<!-- 原生方式 -->
<form action="/" method="post" enctype="application/x-www-form-urlencoded">
 <input type="text" name="username" >
 <input type="password" name="password">
 <button type="submit">Submit</button>
</form>

//序列化方式 使用qs库
const = loginForm: {
        username: '123',
        password: '123'
      }
const { data: result } = await axios.post('login', qs.stringify(loginForm))

后端接收

//Nodejs express框架 需要引入额外库处理为为body对象
const bodyParser = require('body-parser');
const urlencodedParser = bodyParser.urlencoded({ extended: false });
app.post('/urlPost', urlencodedParser, function(req, res) {
 console.log('get application/x-www-form-urlencoded Params: ', req.body);
 res.json({result: 'success', data: req.body});
});

#Python 
username=request.GET.get('username', None)
#使用Django QueryDict
login_form = QueryDict(requests.body)
username= login_form.get('username', None)

3. multipart/form-data

与application/x-www-form-urlencoded不同，这是一个多部分多媒体类型。首先生成了一个 boundary 用于分割不同的字段，在请求实体里每个参数以------boundary开始，然后是附加信息和参数名，然后是空行，最后是参数内容。多个参数将会有多个boundary块。如果参数是文件会有特别的文件域。最后以------boundary–为结束标识。multipart/form-data支持文件上传的格式，一般需要上传文件的表单则用该类型。

其实上与application/x-www-form-urlencoded传输和接收方式都差不多，只是会带上文件

前端请求

   const postData = new FormData();
   postData.append('files', file);
   const headers = {
  'Content-Type': 'multipart/form-data',
};
const { data: result } = await axios.post('upload', postData,headers)

后端接收

//Nodejs
const file = req.file
   // 获取表单传递的参数,如果前端有传
   const title = req.body.title
   const description = req.body.description

#Python
files = request.FILES.getlist('files', None)  # 批量上传文件