axios.post后台接收不到数据以及出现冒号的坑....

本文介绍了解决前端发送FormData格式数据被后端解析为RequestPayload的问题,提供了设置Content-Type、使用qs、URLSearchParams及字符串转换等方法,并解释了如何避免数据传输中出现的大括号和冒号。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、后台接收数据格式formData,但查看network数据格式变为Request Rayload,导致后台接收不到数据

在这里插入图片描述
解决方法:

1.设置Content-Type 的值为 application/x-www-form-urlencoded

①可以将其设置为全局header,在main.js中:

axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'
Vue.prototype.axios = axios

②在单个请求中设置header:

this.axios({
  method:'post',
   url:this.API.userpdf,
    headers: {
      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
    },
   data: data
 }).then(response => {
   console.log(response.data)
 }).catch((err) => {
   console.log(err)
 })

2.具体有三种解决方法,如下:

①使用qs

安装

cnpm install qs --save-dev

引入依赖

import qs from 'qs'

使用依赖

let data = qs.stringify({
	username: this.username,
	password: this.password
})

最后将此data传入后台就是Form Data格式了…

②使用URLSearchParams

let data= new URLSearchParams()
data.append('username',  this.username)
data.append('password',  this.password)

最后将此data传入后台就是Form Data格式了…

③使用字符串

let data='username=' + this.username+ '&password=' + this.password

三种方法的原理都是将数据转为为字符串传入后台,推荐第一种方法。

二、数据传到后台多了大括号和冒号,如下所示:

在这里插入图片描述
将数据转换为JSON数据格式即可,具体使用qs模块和FormData对象,FormData对象的使用如下:

let data = new FormData()
data.append("username", this.username)
data.append("password", this.password)

最后将数据传入后台即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值