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

---

---

问题形貌

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

完整报错信息如下

前端登录接口JS代码如下

1. export function login(data) {
2.   return request({
3.     url: '/users/login',
4.     method: 'post',
5.     headers: {
6.       'Content-Type': 'application/json;charset=UTF-8'
7.     },
8.     data
9.   })
10. }

复制代码

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

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

复制代码

---

原因分析

众所周知，@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的详解和利用
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。