解决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获取网页中的js、css、Flash等文件
Dec 20 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
利用javaScript处理常用事件详解
Apr 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
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
python搭建微信公众平台
2016/02/09 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
试用期转正鉴定评语
2014/01/27 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
七年级思品教学反思
2016/02/20 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python