关于axios发送数据请求，Content-Type数据类型配置，http400状态码错误问题

前端开发通常用Ajax发送数据请求获取后端数据，而axios是一种对ajax技术通过promise实现的一种封装。

axios 使用 post 发送数据时，请求头中Content-Type默认是application/json，所以请求体中的数据会以json字符串的形式发送到后端。

但是实际后端时常会要求的 'Content-Type': 'application/x-www-form-urlencoded' 为多见，这就与我们不符合。所以很多同学会在这里犯错误，导致请求数据获取不到。明明自己的请求地址和参数都对了却得不

到数据，如图http400状态码通常就是Content-Type没有正确配置导致的报错。

 

今天我们就来总结一下数据请求常见的数据格式（content-type）都是如何配置的

1. Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端（axios默认）
2. Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
3. Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

 一、Content-Type: application/json 

　　Content-Type: application/json是axios默认的请求数据类型，我们只需将参数序列化json字符串进行传递即可，无需多余的配置。

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

　　是后端最常要求的数据格式，我通常用两种方式来转化为此数据格式

　　1.直接在axios请求头中添加此格式

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

　　或在axios（）中添加参数 {headers:{'Content-Type':'application/x-www-form-urlencoded'}} 

　　2.引用qs库，qs是一个流行的查询参数序列化和解析库，可以将一个普通的object序列化成一个查询字符串即application/x-www-form-urlencoded格式

 　　 操作步骤：

• 打开控制台输入： npm install qs 
• 在main.js中导入qs插件： import qs from 'qs' 
• 在main.js中配置全局属性： Vue.prototype.$qs = qs 
• 用 this.$qs.stringify(data) 替换你你要传输的参数data

三、Content-Type: multipart/form-data

　　通常提交的数据包含file文件传输的数据格式为multipart/form-data格式

　　 axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'; 

　　或在axios（）中添加参数 {headers:{'Content-Type':'multipart/form-data'}} 

　　

axios 中文文档：http://www.axios-js.com/zh-cn/docs/

 

如有错误或疑惑欢迎评论