I checked the online information and reported 400 generally only two types:
1. Bad Request: "Bad Request"
2. Invalid Hostname: "Domain name that does not exist"
My error here is because the content-type of the front-end request header is inconsistent with the back-end.
The default content type of the backend is application/x-www-form-urlencoded, while the default content type of axios is application/json.
But there are exceptions, and we need to distinguish the types we want to convert based on the annotations of the backend.
According to the previous note:
@RequestBody use content-type = application/json @RequestParam use content-type = application/x-www-form-urlencoded
Change the request header by yourself.
After checking the information, it will find that there will be two more errors.
1. Parameter transfer error
The field name or field type of the data submitted by the front-end is inconsistent with the entity class of the back-end, resulting in the inability to encapsulate.
Solution: The comparison field name and type are consistent with the backend needs
2. The data formats of the front and back ends are inconsistent
The data submitted to the background by the front-end should be of the json string type, while the front-end does not convert the object to a string type.
Solution: Use() to convert the object passed by the front end into a string and format the parameters passed to the background
You can use () in ajax request
// The data to be serializedvar a = {name:'hehe',age:10};
// Serialize the results, support multiple types and methods.name=hehe&age=10
// Serialization results"{"a":"hehe","age":10}"In addition, after using () serialization, the interface is called, and the data transmission mode will be automatically changed to content-type = application/x-www-form-urlencoded, which is consistent with the backend.
Summarize
This is the article about the solution to the 400 Bad Request error when sending a post request by Vue3. This is the end of this article. For more information about Vue3, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!