Skip to content

request 中常见三种Content-Type区别

889字约3分钟

web开发

2021-02-19

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})

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});
});

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