Vue3发送post请求出现400 Bad Request报错的解决办法
更新时间：2023年02月01日 09:13:23 作者：小花睡不醒
这篇文章主要给大家介绍了关于Vue3发送post请求出现400 Bad Request报错的解决办法,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
查了一下网上资料，报400一般无非就是两种：
1. Bad Request：“错误的请求"
2. Invalid Hostname："不存在的域名”
在这里我的报错是因为前端请求头的content-type和后端不一致。
一般后端默认的内容类型是 application/x-www-form-urlencoded，而axios默认的是 applecation/json。
但是也有例外，要根据后端的注解来区分我们要转换的类型。
根据上一篇笔记上说的：
@RequestBody 用 content-type = application/json @RequestParam 用 content-type = application/x-www-form-urlencoded
自行更改请求头。
经过查资料发现它还会有两种报错。
1.传参错误
前端提交的数据的字段名称或者字段类型和后端的实体类不一致，导致无法封装。
解决：对照字段名称、类型与后端需要的保持一致
2.前后端数据格式不一致
前端提交到后台的数据应该是json字符串类型，而前端没有将对象转换成字符串类型。
解决：使用 qs.stringify() 将前端传递的对象转换为字符串，格式化传递给后台的参数
在ajax请求中可以使用 JSON.stringify()
// 要序列化的数据
var a = {name:'hehe',age:10};
// qs.stringify 序列化结果，qs.js支持跟多的类型和方法。
name=hehe&age=10
// JSON.stringify序列化结果
"{"a":"hehe","age":10}"另外使用qs.stringify() 序列化以后，再调用接口，数据传输模式会自动改成 content-type = application/x-www-form-urlencoded ，这样就与后端一致。
总结
到此这篇关于Vue3发送post请求出现400 Bad Request报错的解决办法的文章就介绍到这了,更多相关Vue3报错400 Bad Request内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue.js表单控件实践,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了vue中Axios的封装和API接口的管理,主要目的就是在帮助我们简化代码和利于后期的更新维护，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
这篇文章主要介绍了vue-video-player实现实时视频播放方式(监控设备-rtmp流)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
路由权限控制常用于后台管理系统中，对不同业务人员能够访问的页面进行一个权限的限制。本文主要介绍了两种Vue 路由权限控制，具有一定的参考价值，感兴趣的可以了解一下2021-10-10
这篇文章主要介绍了解决vue中的无限循环问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本文主要介绍了Vue实现未登录跳转到登录页的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了Vue 组件修改根实例的数据的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家详细介绍了Vue实现简单的购物车案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
本文主要介绍了Vue3如何理解ref toRef和toRefs的区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要介绍了如何区分vue中的v-show 与 v-if ，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-09-09
最新评论