解决 Content type ‘application/json;charset=UTF-8‘ not supported

文章目录

  • 问题描述
  • 原因分析
  • 解决方案
  • 参考资料


在这里插入图片描述


问题描述

我项目前端采用vue-elementUi-admin框架进行开发,后端使用SpringBoot,但在前后端登录接口交互时,前端报了如下错误

在这里插入图片描述完整报错信息如下

在这里插入图片描述

前端登录接口JS代码如下

export function login(data) {return request({url: '/users/login',method: 'post',headers: {'Content-Type': 'application/json;charset=UTF-8'},data})
}

后端登录接口相应代码如下

	@PostMapping("/login")public HttpResult login(@RequestBody UsersDto usersDto) {System.out.println("usersDto = " + usersDto);Map<String, String> map = new HashMap<>();map.put("token", "admin-token");return HttpResult.ok(map);}

在这里插入图片描述

在这里插入图片描述


原因分析

众所周知,@RequestBody主要用来 接收前端传递给后端的json字符串中的数据的(请求体中的数据的),然后Spring Mvc就会将该数据装配到目标类(@RequestBody后面的类)中;而GET方式无请求体,所以使用@RequestBody接收数据时,前端不能使用GET方式提交数据,而是用POST方式进行提交。

但是,请注意“装配”的过程中会根据json字符串中的key来匹配对应实体类的属性如果匹配一致且json中的该key对应的值的类型符合(或可转换为“”或null)

Trips

  • 前端json字符串中,如果value为"“的话,后端实体类对应的属性如果是String类型时,那么接受到的就是”"
  • 如果是后端实体类的属性类型是Integer、Double等类型,那么后端接收到的就是null
  • json字符串中,如果value为null的话,后端实体类对应属性接收的就是null

基于上述分析,排查前端携带的参数与后端的接收类时后发现,报错的原因是 前端传过来的json字符串中的key与后端的接受类(使用@RequestBody修饰的类)属性名不一致,无法将key映射到实体类的属性中

前端登录接口携带参数如下

在这里插入图片描述
后端目标类的属性如下

在这里插入图片描述


解决方案

将后端目标类的属性名和前端json字符串对应的key保持一致

在这里插入图片描述


参考资料

  • @RequestBody的详解和使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/10759.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

出现Duplicate key

解决&#xff1a; 第一种情况&#xff1a; 添加一个字段prjId &#xff0c;和数据库表映射时&#xff0c;映射的字段存在映射关系了。 将第二个 TableField中的prj_num改成prj_id 即可。 第二种情况&#xff1a; 转成map的形式时&#xff1a;key重复了&#xff0c;不知道把值赋…

KAN神经网络简短介绍

KANs简介 Kolmogorov-Arnold Networks (KANs) 是一种创新的神经网络模型&#xff0c;它挑战了传统多层感知器(MLPs)的设计&#xff0c;通过将激活函数从节点转移到边上来提升模型的性能和可解释性。KAN的核心在于&#xff0c;其所有权重参数均被单变量的样条函数代替&#xff…

“数字化叙事的革命:人工智能驱动的创意工具的崛起”

近年来&#xff0c;人工智能 (AI) 改变了我们生活的许多方面&#xff0c;数字故事讲述的世界也不例外。随着人工智能驱动的创意工具的出现&#xff0c;广告商、内容创作者和专业人士现在配备了创新的解决方案来简化他们的工作流程&#xff0c;增强他们的创意输出&#xff0c;并…

vue中使用element的i18n语言转换(保姆式教程-保证能用)

话不多说&#xff0c;先看效果:预览地址: https://sandm00.github.io/i18n-switch/#/ 1、项目中需要使用的插件&#xff0c;vue2或vue3、element、vue-i18n、js-cookie、vuex我是在vue2中使用 npm i element-ui -S npm i js-cookie -S npm i vue-i18n8.28.2 //因为我项目使用…

TeXlive TeXstudio安装指南

TeXlive & TeXstudio安装指南 记上次安装Visual Studio Code (Vscode)配置LaTeX后&#xff0c;由于Overleaf页数太多&#xff0c;项目超过了免费计划的编译时限&#xff08;这两天突然出现这个问题&#xff09;。加上毕设和PPT都是在Overleaf上编译&#xff0c;这两天突然…

数列排序C++

题目&#xff1a; 思路&#xff1a; 创建一个数组a&#xff0c;循环遍历输入&#xff0c;然后使用函数sort进行上升排序&#xff0c;最后循环遍历输出a[i]. #include <bits/stdc.h> using namespace std; int main(){int a[201];int n;cin>>n;//输入for(int i0;i&l…

计算机视觉之边缘提取

梯度 1)梯度的本意是一个向量&#xff08;矢量&#xff09;&#xff0c;表示某一函数在该点处的方向导数沿着该方向取得最大值&#xff0c;即函数在该点处沿着该方向&#xff08;此梯度的方向&#xff09;变化最快&#xff0c;变化率最大 边缘 图像的边缘是指图像局部区域亮度…

C++ 容器(五)——Set操作

一、Set容器定义 set 是一个有序关联容器,其中的元素按照升序排列,且不允许重复元素。 set 中的元素是唯一的,即任意两个元素不能相等。 1、set 可以用来对元素进行排序,因为它会自动对元素进行有序排列。 2、set 可以用来去重,当我们需要对一个容器中的元素进行去重操…

使用 scrapyd 部署 scrapy

1.scrapyd 是什么&#xff1f; Scrapyd 是一个用于部署和运行 Scrapy 爬虫项目的服务器应用程序。它使得你可以通过 HTTP 命令来部署、管理和执行多个 Scrapy 爬虫&#xff0c;非常适合持续集成和生产环境中的爬虫部署。 2.安装scrapyd 并使用 2.1 安装 scrapyd F:\scrapydTes…

JVM之运行时数据区

Java虚拟机在运行时管理的内存区域被称为运行时数据区。 程序计数器&#xff1a; 也叫pc寄存器&#xff0c;每个线程会通过程序计数器记录当前要执行的字节码指令的地址。程序计数器在运行时是不会发生内存溢出的&#xff0c;因为每个线程只存储一个固定长度的内存地址。 JAVA虚…

第02章_MySQL环境搭建

一.安装好MySQL之后在windows系统中哪些位置能看到MySQL MySQL DBMS 软件的安装位置。 D:\develop_tools\MySQL\MySQL Server 8.0 MySQL 数据库文件的存放位置。 C:\ProgramData\MySQL\MySQL Server 8.0\Data MySQL DBMS 的配置文件。 C:\ProgramData\MySQL\MySQL Serve…

Web开发小知识点(二)

1.关于取余 我在Dart语言里&#xff08;flutter项目&#xff09; int checkNum (10 - 29) % 10; 那么checkNum等于1 但是在Vue项目里 const checkNum (10 - 29) % 10;却等于-9 语言的特性不同&#xff0c;导致结果也不同&#xff0c;如果要想和Dart保持一致&#xff0c;…

基于SpringBoot的竹宣非遗宣传网站

摘要 随着互联网的普及和数字化时代的到来&#xff0c;竹编等非物质文化遗产的保护与传承面临新的机遇和挑战。该研究旨在使用SpringBoot后端框架与Vue前端框架&#xff0c;构建一个竹编非遗宣传网站&#xff0c;通过丰富的展示形式和交互体验&#xff0c;提升公众对竹编这一非…

vueUse库Sensors模块各函数简介及使用方法---上篇

vueUse库是一个专门为Vue打造的工具库,提供了丰富的功能,包括监听页面元素的各种行为以及调用浏览器提供的各种能力等。其中的Browser模块包含了一些实用的函数,以下是这些函数的简介和使用方法: vueUse库Sensors模块各函数简介及使用方法 vueUseSensors函数1. `onClickOu…

Java基础知识(13)(包括网络编程,反射,动态代理)

Java基础知识&#xff08;13&#xff09; &#xff08;包括网络编程&#xff0c;反射&#xff0c;.动态代理&#xff09; 目录 Java基础知识&#xff08;13&#xff09; 一.网络编程 1. 网络编程基础 &#xff08;1&#xff09;什么是网络编程 &#xff08;2&#xff09…

项目构思以及相关ER图

首先是登录界面&#xff0c;我们首先绘制一个界面&#xff0c;在界面里面存储两个文本框&#xff0c;用于读取用户输入的文本&#xff0c;然后由客户端传到服务器里面和数据库进行对比&#xff0c;如果密码和账号对应的时候就可以进入到学习通的主界面 注册&#xff0c;首先注…

内网工具之ADFind的使用

ADFind是一款C语言编写的域中信息查询工具&#xff0c;可以在域中任何一台主机上使用&#xff0c;在内网渗透中的使用率较高 下载地址&#xff0c;该地址下载工具不需要压缩包密码 https://github.com/mai-lang-chai/AD-Penetration-Testing-Tools/blob/master/AdFind.zip参数…

什么是 IIS

什么是 IIS 一、什么是 IIS二、IIS 的功能三、IIS 几点说明四、IIS 的版本五、IIS 常见的组合 欢迎关注【云边小网安】 一、什么是 IIS IIS&#xff1a;指 Internet Information Services &#xff0c;是一种由微软公司开发的 Web 服务器应用程序。IIS&#xff1a;是一种 Web …

【busybox记录】【shell指令】ls

目录 内容来源&#xff1a; 【GUN】【ls】指令介绍 【busybox】【ls】指令介绍 【linux】【ls】指令介绍 使用示例-默认输出&#xff1a; 列出目录内容 - 默认输出 列出目录内容 - 不忽略以.开头的文件 列出目录内容 - 不忽略以.开头的文件&#xff0c;只忽略.和..文件…

猜猜歇后语

页面 在输入框中填写你猜的答案&#xff0c;点击“显示答案”按钮&#xff0c;显示正确答案。 页面代码 function showAnswer(element){var elem$(element);elem.next().show();} //# // 初始化DataGrid对象 $(#dataGrid).dataGrid({searchForm: $(#searchForm),columnModel:…