scene / Function description :
Framework for recent relearning front end vue, The request was made using axios, I simply wrote a back-end , Implementation of a student list crud,web Layer uses springmvc, And use jq Of $.ajax The mode has been tested and the interface is OK .

Problems :
     Once again, it has been ensured that the back-end interface can receive jquery Of $.ajax Sent post request , But the front end uses vue, Send a request to pass axios To send , The back end cannot get data .

Cause of the problem :
     Requested Content-Type Set to application/x-www-form-urlencoded, So this one Post The request is considered to be HTTP
POST Form request , The parameter appears in the form data, The parameter form is key=value&key1=value1 This form , Back end access usage @RequestParam;
Other cases such as using native AJAX Of POST Request if no request header is specified Request
Header, Default Content-Type yes text/plain;charset=UTF-8, perhaps application/json
, The parameter appears in the Request payload block , The parameter form is standard json format , use @RequestParam Cannot get , Need to use @RequestBody obtain .
     stay axios use Post When sending data , The default is to put the json Submitted to the back end in the request body , It belongs to the second way mentioned above .
Solution :
The first one , Front end solution : Add request header information , And re encapsulate the request parameters
let params = 'studentno=' + this.student.studentno +
        '&name=' + +
        '&phone=' + +
        '&email=' +, params,{headers: {'Content-Type':

It's disgusting to see this kind of concatenation , You can choose another way :

Reference document link :

Here is a copy of the solution given in the reference document , Need to know more about viewable documents .

Using application/x-www-form-urlencoded format

By default, axios serializes JavaScript objects to JSON. To send data in the 
application/x-www-form-urlencoded format instead, you can use one of the
following options.


In a browser, you can use the URLSearchParams
<> API as
const params = new URLSearchParams(); params.append('param1', 'value1');
params.append('param2', 'value2');'/foo', params);
Note that URLSearchParams is not supported by all browsers (see
<>), but there is a polyfill
<> available (make sure to
polyfill the global environment).

Alternatively, you can encode data using the qs <>
const qs = require('qs');'/foo', qs.stringify({ 'bar': 123 }));
Or in another way (ES6),
import qs from 'qs'; const data = { 'bar': 123 }; const options = { method:
'POST', headers: { 'content-type': 'application/x-www-form-urlencoded' }, data:
qs.stringify(data), url, }; axios(options);
The second kind , Back end solution : Use the @RequestBody Annotation substitution @RequestParam
public Map<String, String> save(@RequestBody Student
student)// Automatically encapsulate parameters into student object

The codes are not listed in detail , List only the key parts .