解决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 解析xml文件
Aug 09 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 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
追求程序速度,而不是编程的速度
2008/04/23 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
详解python中docx库的安装过程
2019/11/08 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
提拔干部考察材料
2014/05/26 职场文书
常务副总经理任命书
2014/06/05 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
浅谈Python中对象是如何被调用的
2022/04/06 Python
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫