| springboot接收不到vue发送axios请求中的数据 | 您所在的位置：网站首页 › axios处理错误 › springboot接收不到vue发送axios请求中的数据 |
springboot接收不到vue发送axios请求中的数据
|
当时被这玩意折磨了一个下午六个半小时，相当坐牢。 非常感谢我的好学长帮我解决了。！【2022-11-06】 先贴最终成功的版本 后端的UserController package com.seashellhouse.controller; import com.seashellhouse.controller.utils.R; import com.seashellhouse.pojo.User; import com.seashellhouse.service.IUserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.Map; @CrossOrigin @RestController @RequestMapping("/users") public class UserController { @Autowired private IUserService userService; @RequestMapping("/login") public R login(@RequestBody Map map) { String username = map.get("id"); String password = map.get("password"); System.out.println("传过来的账号是："+username); System.out.println("传过来的密码是："+password); User user = userService.getById(username); if (user == null || !password.equals(user.getPassword())) { return new R(false); } else { return new R(true, user); } } } 复制代码前端的login点击事件方法 login() { alert("账号为：" + this.username + ",密码为：" + this.password); apiFun .login({ id: this.username, password: this.password, }) .then((res) => { console.log(res.flag); console.log(res.data); if (res.flag == false) { alert("账号或密码不正确-n-"); } else { console.log(res.data); } }); }, 复制代码post方法的封装 post(url = '', params = {}) { return new Promise((resolve, reject) => { _axios({ url, data: params, headers: { 'Content-Type': 'application/json;' }, method: 'POST' }).then(res => { resolve(res.data) return res.data }).catch(error => { reject(error) }) }) }, 复制代码登录页面: 成功发送axios请求并接收到后端传回的数据 注意点： 封装好请求方法后，传输参数时，直接写键值对，无需手动转为json数据，且不要用params（{ }）包裹起来。 后端接收数据，不要用以下方法。 可以使用接收map和实体对象的方法 1.使用实体对象方法。 若前端传递过来的数据刚好和我们bean实体对象属性一致，则可以使用对象的形式接收。 后端实体类 @Component public class Score { private int id; private String name; private List scoreList; } 后端Controller @PostMapping("/student/score") public void getScore(@RequestBody Score score){ System.out.println(score); } 复制代码● 前端数据和bean对象属性要一致 ● 必须使用@RequestBody注解，从请求体中拿数据 在我的项目中体现的就比如这样 2，使用Map接收 若前端传递过来的数据很复杂，没有对应的POJO与其对应，就可以用Map进行接收。 后台Controller @PostMapping("/lhj/getdata") public void getData(@RequestBody Mapmap){ System.out.println(map.get("xxx")); } 复制代码对于Map，值的类型建议设置为Object，这样可以使Map能接收各种类型的数据，如字符串、数字、数组和对象等。 在我的项目中体现的就比如这样 两种方法比较 调bug中途还遇到这个报错 表面上看是跨域问题，但是我换一个get方法却可以正常响应，不会报跨域问题，查询资料发现，有时候会因为bad request导致程序以为是跨域的问题，引起跨域问题的报错。实际上不是跨域问题。
这个地方写@RequestMapping("/xxx")或@PostMapping都可以。 通常@requestmapping还得加个类型 前端页面的两个login方法，一个请求类型是options，一个请求是我们写的post类型。 这里的options是指 既然预检请求过了说明没有跨域问题。 而第二个post类型的login方法才是我们写的方法，报错说明没有找到对应接收数据的接口。 我这里因为一开始使用params包裹起来了导致后端那边不能对应params字段，无法接收到数据。 也可以理解为是前后端数据不一致，当时查博客的时候看见了这个问题的博客，但是没想到是params的问题。所以应该就是前后端数据格式对不上导致的404报错，也就是找不到接口。 当时的前端写的，是传出去了参数的，但注意这里的参数最外层是params。 后端的接口通过postman测试也是可以正常使用的 但由于前端用params包裹起来了，后端接收的确是params内部的username和password，所以前后端对应不上，导致前端的post请求找不到对应的接口，找不到对应的接口所以报了404错误。 当时查博客的时候看到了这一段 但是没注意到是params没对应上。还去确认了两边的username和password单词有没有写错 分析这里 我们在
被赋值给params再传给data。 再次包裹的话，数据就变成了 虽然这两种前端传参写法都可以，但前提是后端的写法要与之一致，如果用params包裹，后端对应字段必须为params。 通常情况下，只要F12可以看到参数正常携带，一般才是后端的问题。 因为这里的情况是无关那种是对是错，而是前后端的对应问题，所以其实说哪边有问题都可以。或者说，两边都没有问题，只是没有使用同一种格式，这才是问题所在。 另外，最基础的写法（未封装post,get,post,delete方法），是完全没问题的，可以正常发送请求和接受。 另外，最基础的写法（未封装post,get,post,delete方法），是完全没问题的，可以正常发送请求和接受。 我最近才从csdn转掘金社区，正在参加博客搬家活动，本篇文章原本写于2022-11-06，最近正在筛选相对好一点的文章搬来掘金，有些早的时候写的东西可能显得有些稚嫩了，如有错误，期待指正。 |
【本文地址】