Vue系列6 - Vue项目 axios post方法传参后台接收不到参数 | 8月更文挑战

220 阅读1分钟

这是我参与 8 月更文挑战的第 13 天,活动详情查看: 8月更文挑战

1.背景

今天做项目的时候遇到一个问题,平时没有注意,这次卡了好久,传递参数就是后台接收不到,但是单独调试后端接口是通的,经过搜索终于解决现记录如下:

2.主要问题

前端代码:

请求:

后端代码:

接收,全为空

3.原因

3.1看axios.post 传输参数的格式

Content-Type 为 application/json 类型的,我们需要将这个数据类型变成 application/x-www-form-urlencoded 这种类型的,后台才能接收得到

4.解决方法

4.1使用JSON.stringify

JSON.stringify({taskDTO:addform1})

4.2直接传值

和上述传值方式一样都是默认将数据转为json进行传值

4.3使用 qs 模块

使用axios,不用单独安装 qs模块, axios 包含qs模块

import qs from 'qs'
qs.stringify(addform1);

当headers:{"Content-Type": "application/x-www-form-urlencoded",}时数据才能为formdata传值


4.2.1参数封装

这样传参,参数是模式

4.2.2这样封装

参数下述展示

仔细体会参数的变化,请求会出现415 400 等问题,仔细对比之后就会知道解决方法,考虑需不要加header,怎么接收参数