The post value of axios cannot be received in the background

front end:

 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"));

Back end:

@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"));
    }
}

Select raw application/json through the body parameter in the post method in postman to test whether the back-end has an error

View results:

The background can receive instructions that the problem is in the front end
Before sending data from the front end, open the browser page, click Check, and select NetWork to track NetWork requests

Here you can see that the request has been issued but is ready

View request header

Consistent with the requirements of the background

Check to see if data has been transferred

The request payload here should send json type data. The probability is that json parsing is not done well

If the content type is the form type, here is the request form

The front end reported an error of 400 here

Because of the capture, check the specific information captured in the 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]

Try 1: use qs to serialize data

Step 1: install qs npm i qs

Step 2 import qs from 'qs'

Step 3: reference qs to serialize qs.stringify(data)

View after sending request:

The data was successfully serialized, but the result was 400

The background log is the same as above

Try 2: since an object is requested in postman, we will directly send an object without change in the foreground

 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 observed

This is the same as the json.stringify transmission at the beginning

Consider that JSON.stringify serialization may fail, and the serialization result of qs is not what we want

Try 3: change the background to HttpServletRequest to accept data

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

The front end uses formdata to transmit data

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));

Background display is Null

Front end serialized data

Background display or null

Final solution

This sentence is found in vue.config.js
After commenting out, it can run
After asking others, they know that mock will intercept Post, put and delete requests
In fact, when you encounter this problem, you can try the above three methods. The blogger is due to the configuration problem