axios 用 params/data 发送参数给 springboot controller,如何才能正确获取
今天有人遇到接口调用不通的情况,粗略看了一下是axios跨域请求引起了。找到问题,处理就简单多了。
但是我看其代码,发现比较有意思
export function agentlist(query) {
return request({
url: /agent/list',
method: 'get',
params: query
})
}
export function editagent(data) {
return request({
url: '/agent/editagent',
method: 'post',
data:data
})
}
export function deleteagent(id) {
return request({
url: '/agent/delete',
method: 'post',
params:{id}
})
}
上面的代码中的request是axios实例,同是post却出现了data或params做数载体的情况。凭直觉该代码会在后续请求中出现问题,果不其然后续出现各种问题。
出现的问题主要是:前端传递参数给了springboot程序,但是程序中却接收不到数据或只接收到部分数据。出现问题前后端代码如下:
前端:
export function login(account, password, orgType) {
return request({
url: '/webapi/login',
method: 'post',
data: {"loginId":account,"password":password,"orgType":orgType}
)}
后端:
@PostMapping(value = "/login")
public Result login(String loginId, String password, int orgType, HttpServletResponse response){
}
程序运行异常:
java.lang.IllegalStateException: Optional int parameter 'orgType' is present but cannot be translated into a null value due to being declared as a primitive type. Consider declaring it as object wrapper for the corresponding primitive type.
问题分析:
出现异常的原因看似orgType无法转换为对象类型引发的,真实情况并非如此。真正的原因是Java中的代码根本就无法获取到3个参数,前两个是String类型在无法获取参数的情况下会被赋值为null,第三个参数因是 int 类型,因无法赋值为null,故引发该异常。出现异常并非Java代码写得不好,而是前后台传参衔接出了问题。
前端数据发送网络请求,注意下面的数据的格式:

前端数据确实发送了,但是数据的格式为json格式。
服务器端POST请求获取参数,要求的参数格式为:key=value&key2=value2&key.....,因此服务器端无法获取数据也就好理解了。
解决上述解决方案:
前端解决方案1
export function login(account, password, orgType) {return request({
url: '/webapi/login',
method: 'post',
data: "loginId="+account+ "&password="+password+"&orgType="+orgType
})
}
手动构造服务器端需要的数据格式,此时再次执行客户端程序,并跟踪网络请求如下图,springboot程序正常获取到数据。

上面这种方案虽能解决问题,但太机械,用来分析问题可以,生产中就行不通了。
前端方案2
export function login(account, password, orgType) {
return request({
url: '/webapi/login',
method: 'post',
params: {"loginId":account, "password":password,"orgType":orgType}
})
}
将 axios 中的参数载体由 data 改为 params,此时再次执行客户端程序,并跟踪网络请求如下图,springboot程序正常获取到数据。

上面这种解决方案,将要发送的数据对象以params做载体发送时,axios会把数据对象的属性与值拼成 k=v&k=v 格式,但这些数据是作为 Query String(放在url中的参数) 传递给后台程序的,因此并非真正意义上post传参(实际是post方式向增加了参数url地址,提交空数据
axios 用 params/data 发送参数给 springboot controller,如何才能正确获取的更多相关文章
- 深入requests库params|data|json参数
深入requests库params|data|json参数 一.params params:字典或者字节序列,作为参数增加到URL中.不仅访问URL,还可以向服务器携带参数. 简单来讲也就是说对于原来 ...
- 【axios】get/post请求params/data传参总结
axios中get/post请求方式 1. 前言 最近突然发现post请求可以使用params方式传值,然后想总结一下其中的用法. 2.1 分类 get请求中没有data传值方式 2.2 get请求 ...
- vue中配置axios.js文件,发送请求
为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...
- 把axios挂载到vue实例上面/==Axios 各种请求方式传递参数格式
/*ajax请求*/ import axios from 'axios' axios.defaults.baseURL = 'https://api.douban.com/v2/movie' ...
- 2019.03.29 读书笔记 关于params与可选参数
void Method1(string str, object a){} void Method2(string str, object a,object b) { } void Method3(st ...
- Axios 各种请求方式传递参数(非axios api 请求方式)
get delete 方法较为不同 get请求方式将需要入参的数据作为 params 属性的值,最后整体作为参数传递 delete请求方式将将需要入参的数据作为 data 属性的值,最后整体作为参数传 ...
- 函数,参数数组params与数组参数,结构函数
1.函数 static 返回值类型 函数名(形参1,形参2,...){ 函数体; return 返回值; } 无返回值,则static void 函数名(){ } stat ...
- delphi使用SQL的教程4(使用Params属性为参数赋值 )
17.4.1 使用Params属性为参数赋值 TQuery部件具有一个Params属性,它们在设计时不可用,在程序运行过程中可用,并且是动态建立的,当为TQuery部件编写动态SQL 语句时, D ...
- 编写高质量代码改善C#程序的157个建议——建议98:用params减少重复参数
建议98:用params减少重复参数 如果方法的参数数目不定,且参数类型一致,则可以使用params关键字减少重复参数声明. void Method1(string str, object a){} ...
随机推荐
- Hackergame2019 web
前几天跟着几个大佬一起看了看中科大的Hackergame2019,这个比赛主要针对的是新手,激发新生对CTF比赛的兴趣,虽然我已经大三了,但实在是因为我过于five,也只能帮大佬打打杂,这里把自己做的 ...
- 【转载】Bios报警声
BB是报警的声音你可以根据报警声音长短,数目来判断问题出在什么地方 AWARD BIOS响铃声的一般含义是: 1短: 系统正常启动.这是我们每天都能听到的,也表明机器没有任何问题. 2短: 常规错误, ...
- python+opencv实现车牌定位
写在前面 HIT大三上学期视听觉信号处理课程中视觉部分的实验三,经过和学长们实验的对比发现每一级实验要求都不一样,因此这里标明了是2019年秋季学期的视觉实验三. 由于时间紧张,代码没有进行任何优化, ...
- 最新 龙采科技java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.龙采科技等10家互联网公司的校招Offer,因为某些自身原因最终选择了龙采科技.6.7月主要是做系统复习.项目复盘.Leet ...
- Goahead 编译
目录 Goahead 目录说明 Ubuntu编译 交叉编译 方便测试 参考 title: Goahead date: 2019/11/6 09:45:01 toc: true --- Goahead ...
- kafka 名词解释及原理解析过程(三)
为什么要了解这些名词的解释呢?因为在学一个新的知识或者领域的时候,我们需要知道它所定义的概念和名词意思,因为只有这样我们才能理解和掌握这个新的知识点,才能更加系统的掌握这个技术. 一.名词解释 1.b ...
- Vue框架下实现导入导出Excel、导出PDF
项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出 打印表格 经过技术选型,项目组一致决定通过 ...
- Shell脚本之流程控制(if、for、while)
if 判断 if语句的三种格式: (1)if (2)if else (3)if elif else 语法格式如下: #if 语法格式 if 条件 then 命令1... 命令2... fi #if e ...
- python — 函数基础知识(一)
目录 1 面向过程编程与函数式编程 2 函数的基本结构 3 函数的参数 1 面向过程编程与函数式编程 截至目前我们所接触.所写的编程为:面向过程式编程[可读性差/可重用性差] # 面向过程编程 use ...
- 牛客 P21336 和与或 (数位dp)
大意: 给定数组$R$, 求有多少个数组$A$, 满足$0\le A_i \le R_i$且$A_0+...+A_{N-1}=A_0\space or ...\space or \space A_{N ...