解决axios发送post请求返回400状态码的问题

 更新时间:2018年08月11日 15:38:32   作者:transformer_WSZ  
今天小编就为大家分享一篇解决axios发送post请求返回400状态码的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

今天在用 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状态码的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3+element-plus Dialog对话框的使用与setup 写法的用法

    vue3+element-plus Dialog对话框的使用与setup 写法的用法

    这篇文章主要介绍了vue3+element-plus Dialog对话框的使用 与 setup 写法的使用,本文通过两种方式结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue中使用带隐藏文本信息的图片、图片水印的方法

    vue中使用带隐藏文本信息的图片、图片水印的方法

    这篇文章主要介绍了vue中使用带隐藏文本信息的图片、图片水印的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • Vue组件公用方法提取mixin实现

    Vue组件公用方法提取mixin实现

    这篇文章主要介绍了Vue组件公用方法提取mixin实现,多个组件共用一个方法时可以用 mixin 抽取到一个js文件中,作为共用方法,下面一起进入文章了解更多详细内容吧
    2022-03-03
  • vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)

    vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)

    我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,感觉还不错,特此分享到脚本之家平台供大家参考下
    2017-03-03
  • 源码分析Vue3响应式核心之reactive

    源码分析Vue3响应式核心之reactive

    这篇文章主要为大家详细介绍了Vue3响应式核心之reactive的相关知识,文中的示例代码讲解详细,对我们学习Vue3有一定的帮助,需要的可以参考一下
    2023-04-04
  • Vue+ElementUi实现点击表格链接页面跳转和路由效果

    Vue+ElementUi实现点击表格链接页面跳转和路由效果

    这篇文章主要介绍了Vue+ElementUi实现点击表格中链接进行页面跳转和路由,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • vue实现父子组件双向绑定的方法总结

    vue实现父子组件双向绑定的方法总结

    Vue.js 是一种流行的 JavaScript 框架,它提供了一种简单且高效的方式来构建用户界面,在 Vue 中,父子组件之间的双向绑定是一种常见的需求,下面我们就来学习一下vue中父子组件双向绑定的常用方法吧
    2023-10-10
  • vue-element-admin项目导入和导出的实现

    vue-element-admin项目导入和导出的实现

    组件是Vue.js最强大的功能,这篇文章主要介绍了vue-element-admin项目导入和导出的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • VUE项目中SASS的使用及说明

    VUE项目中SASS的使用及说明

    这篇文章主要介绍了VUE项目中SASS的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue引入静态js文件的方法

    vue引入静态js文件的方法

    这篇文章主要介绍了vue引入静态js文件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06

最新评论