解决后端post请求参数为空的问题

axios发送post请求时, Content-Type默认是application/json;charset=utf-8,当后端需要的形式为 application/x-www-form-urlencoded 或者multipart/form-data 时,值就为空。反过来也是如此。
在这里插入图片描述
常见的post请求数据格式:

  1. Content-Type: application/json : 请求体中的数据会以json字符串的形式发送到后端
 {"input1":"xxx","input2":"ooo","remember":false}
  1. Content-Type: application/x-www-form-urlencoded:请求体中的数据会以普通表单形式(键值对)发送到后端
input1=xxx&input2=ooo&remember=false 
  1. 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--
  1. 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)
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值