解决axios发送post请求返回400状态码的问题


Posted in Javascript onAugust 11, 2018

今天在用 axios 发送一个跨域的post请求时,遇到了一个坑:Uncaught (in promise) Error: Request failed with status code 400。

前台代码如下:

axios({
 method: "post",
 url: "http://localhost:8080/employee/testpost",
 data: {
  username: '234234',
  password: '4565'
 }
}).then((res) => {
 console.log(res.data);
})

后台代码如下:

@CrossOrigin
@PostMapping("/employee/testpost")
@ResponseBody
public Result testpost(@RequestParam(value = "username", required = true) String username,
     @RequestParam(value = "password", required = true) String password) {
 System.out.println(username + " , " + password);
 Result json = new Result();
 json.setResult(1);
 return json;
}

而当我在postman上发送post请求时就能成功获得返回数据。困扰了很久,才发现是请求头的问题。axios请求头的 Content-Type 默认是 application/json,而postman默认的是 application/x-www-form-urlencoded。我这里采取的解决办法是改变后台的接收方式:

@CrossOrigin
@PostMapping("/employee/testpost")
@ResponseBody
public Result testget(@RequestBody Map map) {
 System.out.println(map.get("username") + " , " + map.get("password"));
 Result json = new Result();
 json.setResult(1);
 return json;
}

这样数据就成功返回了!

以上这篇解决axios发送post请求返回400状态码的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 #Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 #Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 #Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 #Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 #Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 #jQuery
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 #Javascript
You might like
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
javascript document.referrer 用法
2009/04/30 Javascript
Javascript 学习书 推荐
2009/06/13 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
python reduce 函数使用详解
2017/12/05 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
代办委托书怎样写
2014/04/08 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
小学教师节活动总结
2015/03/20 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS