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存储数据使用非常常见,js对象和JSON之间转换也比较容易
而且一些请求库默认请求头就是这种类型,无需再进行其他配置如axios.
前端请求
const = loginForm: {
username: '123',
password: '123'
}
const { data: result } = await axios.post('login', loginForm)
后端接收
Express
exports.login = asyncHandler(async (req, res, next) => {
let { username, password } = req.body})
Django
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))
后端接收
Express
//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});
});
Django
#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)
后端接收
Express
//Nodejs
const file = req.file
// 获取表单传递的参数,如果前端有传
const title = req.body.title
const description = req.body.description
Django
#Python
files = request.FILES.getlist('files', None) # 批量上传文件