请求头的content-type及相应的axios配置

以下讨论只针对请求头中的content-type

content-type是HTTP请求头的一个字段，向服务器描述请求体的数据类型

对于get请求：

• 不存在请求体部分，键值对参数拼接在在 URL 尾部，因此请求头不需要设置content-type字段

对于post请求：
常见的数据格式：

• Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端，json数据格式需要后台支持才可以
• Content-Type: application/x-www-form-urlencoded：请求体中的数据会以键值对的形式发送到后端，是post请求的默认content-type
  （form表单，如果不设置 enctype 属性，默认为application/x-www-form-urlencoded 方式提交数据）
• Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件，一般传文件的接口用此种数据格式
  （form表单需要以此种方式提交数据时设置enctype="multipart/form-data"即可）

---

使用axios配置请求头中的content-type

Content-Type:application/json

axios默认的Content-Type就是application/json
我们直接将参数丢在data中即可

axios({
    method:'POST',
    url:'/api/url',
    data: {
    	name: 'AIpoem',
    	age: 20
    }
})
// 最终发送的是'{"name":"AIpoem","age":"20"}'

---

Content-Type:application/x-www-form-urlencoded

有时候后端要求Content-Type必须是application/x-www-form-urlencoded形式，那么通过上面传递的参数，后端是收不到的，我们必须对参数数据进行序列化处理才行，让它以键值对形式发送到后端，而不是json形式

⚠️：
请求参数的序列化：{ name: 'AIpoem',age:20 } => name=AIpoem&age=20
反序列化：name=AIpoem&age=20 => { name: 'AIpoem',age:20 }
json的序列化：JSON.stringify(json对象)
json的反序列化：JSON.parse(json字符串)

下面只介绍一种较简单的方法：qs库，并且这个库是axios里包含的，不需要再下载了

import qs from 'qs';

const data = {
    name: 'AIpoem',
    age: 20
};
axios({
    method:'POST',
    url:'/api/url',
    headers: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    data: {
      qs.stringify(data)
    }
});
// 最终发送的是'name=AIpoem&age=20'

⚠️：
qs.stringify(obj) => 键值对
JSON.stringify(obj) => json字符串

---

Content-Type: multipart/form-data

let data = new FormData();
data.append('name','AIpoem');
data.append('age',20);
axios({
    method:'POST',
    url:'/api/url',
    data,
    header: {
      'content-type': 'multipart/form-data'
    }
})

---

本文参考博文：
https://juejin.cn/post/7036577899142463502#heading-1
https://juejin.cn/post/6968630178163458084#heading-6