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