解决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错误内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vxe-table 是一个功能强大的 Vue 表格组件,它支持虚拟滚动列表作为其核心功能之一,本文主要介绍一下vxe-table的虚拟滚动列表功能的使用场景和优势,感兴趣的可以了解下2023-12-12
dep.notify() 是Vue2响应式系统中触发依赖更新的核心方法,也是理解Vue2 视图“自动更新”的关键,本文给大家介绍Vue dep.notify() 含义及作用,感兴趣的朋友跟随小编一起看看吧2025-12-12
vue elementui table编辑表单时弹框增加编辑明细数据的实现
在Vue项目中,通过使用Element UI框架实现表单及其明细数据的新增和编辑操作,主要通过弹窗形式进行明细数据的增加和编辑,有效提升用户交互体验,本文详细介绍了相关实现方法和代码,适合需要在Vue项目中处理复杂表单交互的开发者参考2024-10-10
文章总结了将Vue和Echarts封装成组件的经验,强调了组件的自适应功能,作者希望这个经验对大家有所帮助,并鼓励大家支持脚本之家2025-12-12
详解webpack + vue + node 打造单页面(入门篇)
本篇文章主要介绍了详解webpack + vue + node 打造单页面(入门篇) ，非常具有实用价值，需要的朋友可以参考下2017-09-09
在Vue项目中可以直接使用localStorage,它支持Vue2和Vue3,在Vue2中,可以通过`localStorage.setItem()`、`localStorage.getItem()`和`localStorage.removeItem()`来保存、读取和删除数据,本文给大家介绍vue中的localStorage使用详解,感兴趣的朋友一起看看吧2025-03-03
这篇文章主要介绍了vue-cli2 构建速度优化的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了快速搭建vue2.0+boostrap项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了VUE Element-UI多级菜单动态渲染的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要给大家介绍了关于vue中事件绑定的相关资料,事件绑定在Web开发中非常常见,我们经常需要在页面中为某个DOM元素绑定事件,如点击、鼠标移动、键盘敲击等等,需要的朋友可以参考下2023-09-09
最新评论