解决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 相关文章推荐
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
详解vue express启动数据服务
Jul 05 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
design vue 表格开启列排序的操作
Oct 28 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面向对象——访问修饰符介绍
2012/11/08 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
浅谈js中的this问题
2017/08/31 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
原生js实现日历效果
2020/03/02 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
python查找指定具有相同内容文件的方法
2015/06/28 Python
python实现rsa加密实例详解
2017/07/19 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
python实发邮件实例详解
2019/11/11 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Python PyQt5整理介绍
2020/04/01 Python
公务员职务工作的自我评价
2013/11/01 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
接待员岗位责任制
2014/02/10 职场文书
董事长助理岗位职责
2015/02/11 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
大国崛起观后感
2015/06/02 职场文书
感恩老师主题班会
2015/08/12 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
创业计划书详解
2019/07/19 职场文书