解决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之对系统的toFixed()方法的修正
May 08 Javascript
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
javascript getElementsByTagName
Jan 31 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
js实现表格筛选功能
Jan 18 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
微信小程序中post方法与get方法的封装
Sep 26 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
图片onload事件触发问题解决方法
2011/07/31 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
AngularJS日程表案例详解
2017/08/15 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
python 提取文件的小程序
2009/07/29 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
在Python中使用模块的教程
2015/04/27 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
结婚邀请函范文
2014/01/14 职场文书
数学国培研修感言
2014/02/13 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
春节随笔
2015/08/15 职场文书
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js