浅析axios中post上传，后台接收不到参数

最新推荐文章于 2023-03-29 14:42:05 发布

年三十

最新推荐文章于 2023-03-29 14:42:05 发布

阅读量846

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_35603476/article/details/105505902

版权

34 篇文章 1 订阅

订阅专栏

最近在用vue-element-admin这套模板，其中使用封装的http请求，post请求参数后台反馈接收不到

先说一下 HTTP content-type

Content-Type（内容类型），一般是指网页中存在的 Content-Type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件，这就是经常看到一些 PHP 网页点击的结果却是下载一个文件或一张图片的原因

Content-Type 标头告诉客户端实际返回的内容的内容类型

常见的媒体格式类型如下：

以application开头的媒体格式类型：

application/xhtml+xml ：XHTML格式
application/xml： XML数据格式
application/atom+xml ：Atom XML聚合格式
application/json： JSON数据格式
application/pdf：pdf格式
application/msword ： Word文档格式
application/octet-stream ：二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded ： <form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

另外一种常见的媒体格式是上传文件之时使用的：

问题分析：

axios 文档提到：axios 使用 post 发送数据时，默认是直接把 json 放到请求体中提交到后端的

且axios使用post，axios 源码中 Content-Type 默认处理为 application/json;charset=utf-8

而后台常见接收类型为 'Content-Type': 'application/x-www-form-urlencoded' 以及 @RequestParam注解

通讯参数不符合

之前在网络上查到的，修改headers的Content-Type类型，无果

解决方案：

引入qs库，使用stringify处理参数

qs.parse()将URL解析成对象的形式

qs.stringify()将对象序列化成URL的形式，以&进行拼接，这样后台可以通过@RequestParam获取到参数

JSON中同样存在stringify方法，但是两者之间的区别是很明显的，如下所示

// JSON
{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}
// QS
uid=cs11&pwd=000000als&username=cs11&password=000000als

将参数序列化之后，上传参数后，后台接收正常

或者尝试与后台沟通，将@RequestParam修改为@RequestBody（从请求体中获取参数），来实现参数接收

关注