axios的post传数值 后台无法接收

axios的post传数值 后台无法接收

前端：

 var datas ={
          "CoTelephone":123,
          "PassWord":45613215 }
       axios({
          method:"post",
          headers:{"Content-Type":"application/json;charset=UTF-8"},
          url:"/api/customer/register",
          data: JSON.stringify(datas),
          }).then(res => console.log(res)).catch(res =>console.log("0"));

后端：

@Controller
@ResponseBody
@RequestMapping("/customer")
public class CustomerController {
    
   @PostMapping(value = "/register",produces="application/json;charset=utf-8;")
    public void registerCustomer(@RequestBody Map<String,Object>map) {
       System.out.println(map.get("CoTelephone"));
       System.out.println(map.get("PassWord"));
    }
}

通过postman中的post 方法中body传参 选择 raw application/json来进行测试后端是否出错

查看结果：

后台可以接收 说明问题是在前端
进行前端发送数据前 打开浏览器页面 点击检查 在里面选中NetWork 去追踪网络请求

这里可以看到请求已经发出了 但是是准备状态的

查看请求头

和后台的要求一致

查看是否传送了数据

这里的request payload 应该发送json类型的数据 大概率是没有做好json解析

如果是content-type是form类型的这里是request form

前端这里报错了400

因为有捕捉 在console控制台中查看一下捕捉到的具体信息

2021-10-23 09:02:16.567  WARN 3640 --- [nio-8080-exec-8] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.http.converter.HttpMessageNotReadableException: I/O error while reading input message; nested exception is org.apache.catalina.connector.ClientAbortException: java.net.SocketTimeoutException]

尝试一：使用qs来进行序列化data数据

第一步 安装qs npm i qs

第二步 导入qs import qs from ‘qs’

第三步 引用qs进行序列化 qs.stringify(data)

发送请求后查看：

已经成功将数据进行序列化 但是结果还是400

后台日志同上

尝试二： 既然postman中请求的是直接一个对象 我们这里在前台就直接不改动 发送一个对象

 var datas ={
            "CoTelephone":123,
            "PassWord":45613215 }
         axios({
            method:"post",
            headers:{"Content-Type":"application/json;charset=UTF-8"},
            url:"/api/customer/register",
            data: datas,
            }).then(res => console.log(res)).catch(res =>console.log(res));

观察到requset payload

这里与一开始的json.stringify传输的内容相同

考虑可能是JSON.stringify序列化失败 而 qs的序列化结果不是我们想要的

尝试三：将后台改成HttpServletRequest 来接受数据

@PostMapping(value = "/register")
    public void registerCustomer(HttpServletRequest request) {
        System.out.println(request.getParameter("CoTelephone"));
        System.out.println(request.getParameter("PassWord"));
    }

前端改成使用formdata来传数据

var datas ={
            "CoTelephone":123,
            "PassWord":45613215 }
         axios({
            method:"Post",
            headers:{"Content-Type":"application/x-www-form-urlencoded"},
            url:"/api/customer/register",
            data:datas,
            }).then(res => console.log(res)).catch(res =>console.log(res));

后台显示为Null

前端序列化数据

后台显示还是null

最终解决

发现vue.config.js中有这一句
注释掉后 就可以运行了
询问别人后得知mock会拦截Post，put,delete请求
其实遇到该问题上述的三种方式都可以试试 博主是因为配置问题