解决Vue2 axios发请求报400错误"Error: Request failed with status code 400"

 更新时间:2023年07月11日 10:03:42   作者:Korbin227  
这篇文章主要给大家介绍了关于如何解决Vue2 axios发请求报400错误"Error: Request failed with status code 400"的相关资料,在Vue应用程序中我们通常会使用axios作为网络请求库,需要的朋友可以参考下

最近在做一个项目,后端写了一个登录接口,postman可以正常请求。但我axios发请求出现400错误"Error: Request failed with status code 400"

请求:

   testdata:{
        username:'admin',
        password:'123456'
      },
 // 报错400
    await userLogin(this.testdata)

错误:

 我研究了两天,查了无数资料,最后和朋友一起找到解决方法

原因:后端没跟我说需要什么格式的数据,我以为是默认的json,后来查阅错误得知后端需要的数据格式是 “application/x-www-form-urlencoded”,这种格式不能直接传数据,需要对数据进行编码处理,不然就报错。

解决方案:

引用qs库 不用下载 axios里面已经存在

1.引入qs库

import Qs from 'qs'

2.用qs对数据进行处理,发生请求 

await userLogin(Qs.stringify(this.testdata))

3.成功

 困扰了我两天,希望能帮大家少踩坑。

总结

到此这篇关于解决Vue2 axios发请求报400错误"Error: Request failed with status code 400"的文章就介绍到这了,更多相关Vue2 axios发请求报400错误内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue 中生命周期定义及流程

    Vue 中生命周期定义及流程

    这篇文章主要介绍了Vue中生命周期定义及流程,生命周期又被称为生命周期回调函数、生命周期函数或生命周期钩子,下文关于其更多有趣的介绍需要的小伙伴可以参考一下文章详细内容
    2022-05-05
  • vue组件值变化但不刷新强制组件刷新的问题

    vue组件值变化但不刷新强制组件刷新的问题

    这篇文章主要介绍了vue组件值变化但不刷新强制组件刷新的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue-cli项目优化方法- 缩短首屏加载时间

    vue-cli项目优化方法- 缩短首屏加载时间

    这篇文章主要介绍了vue-cli项目优化 缩短首屏加载时间,需要的朋友可以参考下
    2018-04-04
  • vue自定义数字输入框组件

    vue自定义数字输入框组件

    这篇文章主要为大家详细介绍了vue自定义数字输入框组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • vue3.0实现下拉菜单的封装

    vue3.0实现下拉菜单的封装

    这篇文章主要为大家详细介绍了vue3.0实现下拉菜单的封装代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue路由切换和Axios接口取消重复请求详解

    Vue路由切换和Axios接口取消重复请求详解

    在web项目开发的过程中,经常会遇到客服端重复发送请求的场景,下面这篇文章主要给大家介绍了关于Vue路由切换和Axios接口取消重复请求的相关资料,需要的朋友可以参考下
    2022-05-05
  • Vue2.x通用编辑组件的封装及应用详解

    Vue2.x通用编辑组件的封装及应用详解

    这篇文章主要为大家详细介绍了Vue2.x通用编辑组件的封装及应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue select change事件如何传递自定义参数

    vue select change事件如何传递自定义参数

    这篇文章主要介绍了vue select change事件如何传递自定义参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vuex管理状态仓库使用详解

    vuex管理状态仓库使用详解

    这篇文章主要介绍了vuex管理状态仓库使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue自定义全局共用函数详解

    vue自定义全局共用函数详解

    今天小编就为大家分享一篇vue自定义全局共用函数详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论