【Vue3】发送post请求出现400 Bad Request 报错

这篇具有很好参考价值的文章主要介绍了【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 ,这样就与后端一致。文章来源地址https://www.toymoban.com/news/detail-493997.html

到了这里,关于【Vue3】发送post请求出现400 Bad Request 报错的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Nginx 代理调用 IIS报错:Bad Request Invalid Hostname HTTP Error 400. The request hostname is invalid

    由于Nginx配置文件中的proxy_set_header参数与请求的IIS 主机名不匹配所导致。使用Nginx代理调用IIS时,出现Bad Request - Invalid Hostname HTTP Error 400错误,由于IIS的主机头(Host Header)和Nginx代理请求的主机名不匹配所导致的。 解决问题的方法:在IIS站点的绑定中正确的主机头,确保和

    2024年02月04日
    浏览(56)
  • restTemplate发送https请求报错I/O error on POST request for “xxxx“: Remote host terminated the handshake解决

    最近在项目开发中遇到了一个问题,用restTemplate调用https接口的时候一直掉不通,报错I/O error on POST request for “xxxx”: Remote host terminated the handshake;nested exception is javax.net.ssl.SSLHandshakeException: Remote host terminated the handshake 远程主机终止了握手 一开始以为是SSL证书的问题。在百度

    2024年02月11日
    浏览(48)
  • 在Vue中使用axios发送post请求时,可能会出现后端无法接收到参数的情况。

    在Vue中使用axios发送post请求时,可能会出现后端无法接收到参数的情况。这个问题的原因是axios默认发送的请求是json格式的,而后端接收的请求是form表单格式的,这就导致后端无法获取json格式的请求参数。解决这个问题可以通过设置axios的请求头部信息,将请求格式设置为

    2024年02月16日
    浏览(41)
  • vue3使用axios发送post请求,后台接收到的参数总是null,使用postman测试后台是能接收数据的

    使用vue3,连基本的请求都失败了,使用浏览器查看post请求,参数中是有值,但是传到后台,每个参数都是null,不知道哪里错了。排除了后台的错误,就剩下了vue代码的错误了。我出错的地方是vue使用axios发送post请求的时候,参数格式写错了。 直接贴代码了,正确的写法 f

    2024年02月13日
    浏览(36)
  • postman : “status“: 400, “error“: “Bad Request“,

    总结:去看数据库的数据类型对不对,长度够不够 我的postman报错了 原本以为是要把所有的都打一边即使是空的,但是把“id”:“”放入postman也是一样的400 后续找到一篇文章说可能是数据类型有问题,去看了一眼数据库,结果phone那列没有长度, “status“: 400, “error“: “

    2024年02月10日
    浏览(43)
  • 【微信小程序】使用 wx.request 方法来发送POST网络请求,携带RequestBody参数

    在微信小程序中,你可以使用 wx.request 方法来发送网络请求。以下是将上述 Java 代码转换为微信小程序版本的示例: 在上述代码中,我们使用 wx.request 方法发送 POST 请求,并将请求的 URL、请求体数据、请求头等信息进行相应的设置。请求成功后,会在回调函数的 success 中处

    2024年02月15日
    浏览(46)
  • Vue2 axios 发请求报400错误 “Error: Request failed with status code 400“

    最近在做一个项目,后端写了一个登录接口,postman可以正常请求。但我axios发请求出现400错误 \\\"Error: Request failed with status code 400\\\" 请求: 错误:  我研究了两天,查了无数资料,最后和朋友一起找到解决方法 原因:后端没跟我说需要什么格式的数据,我以为是默认的json,后来

    2024年02月11日
    浏览(58)
  • post请求出现required request body is missing错误的问题所在?

    后端接口查询获取数据库中的数据,前端接受数据进行列表展示。 后端接口swagger测试无误,前端报错500:required request body is missing 给出以下两点原因及其方案: 1.后端原因:controller中该接口函数的参数应为请求体@RequestBody,而不是@RequestParam 改为: 2.前端原因:POST与GET请求

    2024年02月04日
    浏览(66)
  • 浏览器Post请求出现413 Request Entity Too Large (Nginx)

    环境 操作系统 window server 2016 前端项目 Vue2 Nginx-1.25.3 一、错误信息 前端是vue项目,打包后部署在Nginx上,前端post请求出现Request Entity  Too Large错误信息。 ​这种问题一般是请求实体太大(包含参数,文件等)。客户端发送的实体主体部分比服务器能够或者限制处理的要大。

    2024年04月11日
    浏览(34)
  • 使用Postman调试API遇到“400 Bad Request”问题

    今日使用Postman调试一个临时接手的API,参照调用程序代码填充好请求头、请求体参数(post),Postman客户端始终提示“400 Bad Request”,调用失败! 尝试: 观察日志,可确认Postman调用请求并未抵达后端服务; 使用IDEA 内置的 HTTP Client 工具,简单配置了请求头和JSON格式的请求

    2024年01月17日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包