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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue如何为GET或POST请求设置请求头

    目录 为GET或POST请求设置请求头 安装vue-cookies vue项目设置请求头权限问题 为GET或POST请求设置请求头 安装vue-cookies 就通过我写的一个小项目的登录来讲vue-cookies,登陆成功后拿到后台返回的token值,把它保存到vue-cookies中 首先需要安装vue-cookies npm install vue-cookies --save 使用 import Vue from 'vue' import VueCookies from 'vue-coo

  • vue中post请求报400的解决方案

    目录 vue post请求报400 vue 异步请求问题 1. get 请求方式 2. post 请求方式 3. axios 全局设置 4. 请求代理 vue post请求报400 1.为默认数据格式为json,发请求时参数报错 通过以下方式修改数据格式即可 import qs from 'qs'; // import qs from 'querystring' const data = { 'bar': 123 }; const options = {   method: 'POST',  

  • 在vue项目中使用axios发送post请求出现400错误的解决

    目录 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 总结了错误的几个原因 vue axios400 Bad Request问题 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 1.bad request:“错误的请求" 2.invalid hostname:"不存在的域名” 我报的错是第一种bad request 总结了错误的几个原因 1.请求头错误,前端请求头的content-type和后端不一致 axios默认的请求头的

  • Vue3发送post请求出现400 Bad Request报错的解决办法

    查了一下网上资料,报400一般无非就是两种: 1. Bad Request:“错误的请求" 2. Invalid Hostname:"不存在的域名” 在这里我的报错是因为前端请求头的content-type和后端不一致. 一般后端默认的内容类型是 application/x-www-form-urlencoded,而axios默认的是 applecation/json. 但是也有例外,要根据后端的注解来区分我们要转换的类型. 根据上一篇笔记上说的: @RequestBody 用 con

  • 解决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((

  • vue3+vite项目中按需引入vant报错:Failed to resolve import的解决方案

    目录 问题描述 原因分析 解决方案 总结 问题描述 近日尝试使用vite+vue3+vant开发项目过程中,参考vant官网开发指南->快速上手->引入组件 按照上述配置好后,运行vite环境报错:Failed to resolve import 原因分析 根据报错信息,发现是vant的样式引入路径不对. 程序解析为:项目路径/node_modules/vant/lib/vant/es/组件/style 实际应该是:项目路径/node_modules/vant/lib/ vant/es/组件/

  • Jquery Ajax请求文件下载操作失败的原因分析及解决办法

    Jquery Ajax请求文件下载操作失败的原因分析及解决办法

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来分析一下失败的原因 一.失败的原因 那是因为response原因,一般请求浏览器是会处理服务器输出的response,例如生成png.文件下载等,然而ajax请求只是个"字符型"的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取而已,是无法执行的,说白

  • Ajax报错400的参考解决办法

    Failed to load resource: the server responded with a status of 400 (Bad Request) 报错代码为400的错误的原因:基本上都是前台传的数据格式不正确造成的,但是这个格式如何不正确,就得看如何理解这个数据到底是怎么在传的啦. 我这只是简单的记录下,我这个报错400的原因,要是和你的不一样呢,也是有可能的. 写下我的代码报错400,的原因: 前台代码: $.ajax({ url: SUBSYSTEM_APP_NAME + "

  • node.js请求HTTPS报错：UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法

    发现错误 最近在用Nodejs发送https请求时候,出现\"Error: UNABLE_TO_VERIFY_LEAF_SIGNATURE\"的错误,错误如下: events.js:72 throw er; // Unhandled \'error\' event ^ Error: UNABLE_TO_VERIFY_LEAF_SIGNATURE at SecurePair. (tls.js:1381:32) at SecurePair.emit (events.js:92:17) at

  • vue3接口数据赋值对象,渲染报错问题及解决

    vue3接口数据赋值对象,渲染报错问题及解决

    目录 vue3接口数据赋值对象,渲染报错 vue在渲染数据的时候的一些报错问题 问题描述 解决方法 vue3接口数据赋值对象,渲染报错 const app = require('express')() // 跨域设置 app.all("*", function (req, res, next) { res.setHeader("Access-Control-Allow-Credentials", true); res.setHeader("Access-C

  • Vue3格式化Volar报错的原因分析与解决

    Vue3格式化Volar报错的原因分析与解决

    目录 问题描述 原因分析: 解决方案: 总结 问题描述 今天在新建一个Vue3项目的时候,vscode突然提示报错,如下: The 1 extension(s) below, in workspace recommendations have issues: johnsoncodehk.volar (not found in marketplace) 原因分析: 百度了一下,网上并没有任何类似的例子和结局方案 首先根据英语提示,翻译报错原因是因为 工作区推荐的 johnsoncodehk.vol

  • vue3项目中代码出现红色波浪线的问题及解决

    vue3项目中代码出现红色波浪线的问题及解决

    目录 vue3项目代码出现红色波浪线 vue3没有语法错误但一直有红色波浪线报错,以及解决eslint黄色警告 vue3项目代码出现红色波浪线 最近换电脑改成了vue3,导致代码规则有些地方和之前不一样. 因为是导入的jeecg项目,打开了eslint,所以有很多地方代码的写法不一样,之前是在vue.config.js文件中,加上lintOnSave: false就可以避免报错.现在设置了false,代码不规范的地方还是会有红色波浪线. 可以打开文件-首选项-设置,搜索eslint 然后把两个打

随机推荐