解决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 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
PHP生成静态页面详解
2006/11/19 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python常用函数与用法示例
2019/07/02 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
师范大学音乐表演专业求职信
2013/10/23 职场文书
酒店管理专业毕业生推荐信
2013/11/10 职场文书
优秀民警事迹材料
2014/01/29 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
党员先进事迹材料
2014/12/19 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python