解决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 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
使用JavaScript解析URL的方法示例
Mar 01 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 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
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
写出高质量的PHP程序
2012/02/04 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
React实现轮播效果
2020/08/25 Javascript
Python在Console下显示文本进度条的方法
2016/02/14 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Python PIL图片添加字体的例子
2019/08/22 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
工程业务员工作职责
2013/12/07 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
学校评语大全
2014/05/06 职场文书
海上钢琴师观后感
2015/06/03 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js