解决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 fullscreen全屏实现代码
Apr 09 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 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用mysql数据库存储session的代码
2010/03/05 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
jQuery 渐变下拉菜单
2009/12/15 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
工厂仓管员岗位职责
2014/01/01 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
2014国庆节标语口号
2014/09/19 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
合作合同协议书范本
2015/01/27 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书