axios.post后台接收不到数据以及出现冒号的坑...._网页表单数据冒号后无内容-优快云博客

本文链接：https://blog.youkuaiyun.com/Daisy_1/article/details/98083493

本文介绍了解决前端发送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)

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