解决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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
document.compatMode介绍
May 21 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
js中开关变量使用实例
Feb 24 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 Javascript
详解Vue router路由
Nov 20 Vue.js
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之autoload运行机制实例分析
2014/08/28 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
div层的移动及性能优化
2010/11/16 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JavaScript常用本地对象小结
2016/03/28 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
python的id()函数介绍
2013/02/10 Python
python 字符串split的用法分享
2013/03/23 Python
Python collections模块实例讲解
2014/04/07 Python
pandas如何处理缺失值
2019/07/31 Python
Python实现Restful API的例子
2019/08/31 Python
Python configparser模块操作代码实例
2020/06/08 Python
高山背包:High Sierra
2017/11/23 全球购物
大学四年个人的自我评价
2014/02/26 职场文书
幼儿园招生广告
2014/03/19 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle