Axios的两种请求类型的区别（ application/json；charset=utf-8 、x-www-form-urlencoded）

前言

问：Axios中（请求头中里面的）请求类型（Content-Type）是做什么的？

答：前端在请求接口（api）服务时，需要将api所需要的参数传递给后端，那么使用何种方式传参给api，就是由请求类型定义的，请求类型就是一个规范，这个规范由后端同事在写接口时定义好的，所以前端需要请求接口时，需要保持请求类型和传参的格式与后端接口定义的一致，否则请求接口不成功！

亲身体验

1.在vue项目中使用axios请求登陆api接口时，请求返回状态码401？当时第一时间以为是token失效？想着不对劲，感觉应该是参数问题，仔细对比后未果，

2.将问题反馈给后端同事，后端同事让我这边截图下api的请求头，最后发现我这边的请求类型与后端那边接口的请求类型不一致，后端接口请求类型：x-www-form-urlencoded类型，而我这边 ：application/json;charset=utf-8（注：axios默认的请求类型）

3.将项目中axios的默认请求类型修改成x-www-form-urlencoded类型，修改传参格式（浏览器url传参方式：api名称后，使用?拼接参数，例如：‘xxx/api/login?username=’+name+’&password=’+u_password）。

3.1 如何修改axios的默认请求类型？
3.1.0 全局修改：
vue项目main.js入口文件中，引入axios后：axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
3.1.1 单个请求内修改： {headers:{‘Content-Type’:‘application/x-www-form-urlencoded’}}
3.1.2axios.create里面定义对象，然后去对象下的headers下赋值即可！

结语

1.Content-Type: application/x-www-form-urlencoded：注意关键字urlencoded，浏览器url传参方式，一般使用?拼接参数，

2.Content-Type: application/json ：注意关键字JSON，一般前端传参（参数的格式）：对象类型

记住一句话：请求类型对应的传参格式是不一样，所以修改请求类型后，也要注意修改传参格式！