axios发送post请求时, Content-Type默认是application/json;charset=utf-8,当后端需要的形式为 application/x-www-form-urlencoded 或者multipart/form-data 时,值就为空。反过来也是如此。
常见的post请求数据格式:
- Content-Type: application/json : 请求体中的数据会以json字符串的形式发送到后端
{
"input1":"xxx","input2":"ooo","remember":false}
- Content-Type: application/x-www-form-urlencoded:请求体中的数据会以普通表单形式(键值对)发送到后端
input1=xxx&input2=ooo&remember=false
- Content-Type: multipart/form-data: 它会将请求体的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件
-----WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"
title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
- text/xml:这种直接传的 xml 格式
<!--?xml version="1.0"?-->
<methodcall>
<methodname>examples.getStateName</methodname>
<params>
<param>
<value><i4>41</i4></value>
</params>
</methodcall>
怎样配置content-type?
1、content-type为application/json ,axios的默认content-type的内容,仅需要传入json字符串就可以。
2、content-type为application/x-www-form-urlencoded,这是原生表单请求的默认请求方式,三种方案。
(1)使用URLSearchParams接口
var param = new URLSearchParams()
param.append('id',id)
param.append('user' , user)
axios(
{
method:'post',
url: url,
data : param,
}
).then(res => res).catch(err => err)
(2)使用axios自带的库 qs
import qs from 'qs'
var data = {
name:'name',
user:'user'
}
axios.post(url, qs.stringify(),{
headers:{
contentType:'application/x-www-form-urlencoded'}}
).then(res => res).catch(err => err)
(3)使用node.js 的querystring 进行序列化
Content-Type: multipart/form-data
使用原生接口formData
var data = new formData()
data.append('user',user)
data.append('user',user)
axios.post(url, data,{
config}
).then(res => res).catch(err => err)