axios请求头中的Content-Type，及传参

Content-Type：

服务器在收到http请求的时候，怎么去解析参数，是请求头header中的Content-Type规定的，也就是内容类型。不同形式的参数设置不同类型的请求头。

axios默认添加了对请求方法'post', 'put', 'patch' 添加了默认请求头'Content-Type': 'application/x-www-form-urlencoded', 如果传参data是json对象，那么请求头就会更改为Content-Type':application/json;charset=utf-8'

Axios请求头中的Content-Type常见的有3种：

1.Content-Type:application/json

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

3.Content-Type:multipart/form-data

1.Content-Type: application/json
application/json 它声明了请求体中的数据将会以json字符串的形式发送到后端，那么可以直接接收json。

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

　Content-Type:application/x-www-form-urlencoded，声明了请求体中的数据会以键值对（普通表单形式 {key:value} ）发送到后端，这种类型是Ajax默认的。当后端需要我要传键值对给他们的时候，就需要在头部设置

headers: { 'Content-Type':'application/x-www-form-urlencoded'}

然后，将请求体中的数据设置为键值对（但是求体中的数据一般是JSON对象，这个时候，就可以使用qs库将对象转为url参数形式，也就是将json序列化qs.stringify()，方法有2.1、2.2、2.3 等，qs(就是2.2的例子)比较常用 ) 。

　qs是Axios默认就有的，不需要再npm。其作用有二：1.将url中的参数转为对象；2.将对象转为url参数形式，也就是用&连接的键值对。

例：qs的作用-----------------------------

（注意：不能对请求体中的数据使用扩展运算符，防止影响到正常解析的分隔）

import qs from 'qs';

1、var url='userId=admin&password=hellworld';
// 转为对象
console.log(qs.parse(url));
2、var person = {name:'lihua',age:18};
// 转为url参数形式
console.log(qs.stringify(person));

qs作用end------------------

例:具体例子

传送表单形式的数据

2.1 方法一，使用URLSearchParams对象

let data = new URLSearchParams();
data.append('username', 'admin');
data.append('password', '123456');

axios({
    url: '/OAuth/oauth/token',
    method: 'post',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: data
})

2.2 方法二使用qs.stringify(),传送表单形式的数据

import qs from 'qs'
var data = {
    "username": "admin",
    "password": "123456"
}
 
axios({
    url: '/OAuth/oauth/token',
    method: 'post',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: qs.stringify(data)
})

2.3 方法三

1、全局设置请求头

axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

2、发送请求前处理数据

axios.defaults.transformRequest = [
function (data) {
 // Do whatever you want to transform the data
 let ret = ''
 for (let k in data) {
 ret += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'
}
 return ret
}]

3.Content-Type: multipart/form-data

Content-Type:multipart/form-data，则一般用来上传文件，指定传输数据为二进制数据，例如图片、mp3、文件，也可以用来上传键值对。简单写法如下：

<input type="file" />

let data = new FormData();
data.append('userfile', document.querySelector('input[type=file]').files[0]);
data.append('username', 'admin');
data.append('password', '123456');

axios({
    url: '/XXXX/XXXX',
    method: 'post',
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    data: data
})

用post时，用data传参不在地址中显示参数，用params传参在地址中显示参数
用get时，用data传参无法传参数，必须用params传参。

这篇主要是总结和参考了几位博主的文章，都写的比较详细，大家有兴趣可以去看原文，链接在此：

Axios请求头中常见的Content-Type及其使用 - 他好像一条狗啊 - 博客园

axios的各种传参方式 - liangwp - 博客园

axios请求头中的Content-Type，及传参

猜你喜欢