Source of the problem: When using axios, and java FBI found that transfer interface server always get parameter data, but also check the network really pass the data, only the article.
Consideration vue-axios $ .ajax of both the requests and data transmission in a manner based on
To java, for example, data transmission origin:
A beginning, Java in order to achieve the front and rear end of the communication, in the http protocol allows the development of data transmission rules must be followed:
1) so as to only allow transmission of data transmission, number object string or binary format stream data are not allowed.
2) format string specifies the content type of data transmission, i.e., content-type, are the following:
a) the underlying xmlhttprequest default Content-Type is text / plain; charset = UTF- 8
that is: the data can be "aaaa", "[12313] , {dsafdsafsd: 12313}"
b) Form native form submission, the string data is added xmlhttprequest rule checking,
i.e., the data string to the key-value must present embodiment, in order to distinguish the parameters, then the concept of key-value pairs appears.
Key-value pairs to & spaced, such as: username = 1111 & password = 2222
for the type of data and the previous distinction, modifying Content-Type is application / x-www-form- urlencoded
and a bond to input the name, value of value, input to a plurality of spaced apart &
<form>
<input name=“username” value=“1213”/>
<input name=“password” value=“321”/>
</form>
submit time, all the acquired key input for forming data: "username = 1213 & password = 321"
is sent to the background, the background of the received string,
c) With the development of the Internet, data transmission and more complex, form has been insufficient to meet demand.
Thus ajax occurred, and firstly realizes the function of the form submission form
i.e. Content-Type is application / x-www-form- urlencoded, and the data transmission format is a key-value pair.
However, on the writing mode, data is written as an Object, Object into the internal implementation of the string key
Has developed a period of time, there is a new way to express key-value data string, called JSON,
a string in JSON format also allows easy access to server parameters.
Ajax has achieved this kind of transmission parameter,
then the ajax data: {username: 1213, password : 321},
the final transmission is JSON.stringify (data) => "{ " username ": 1213," password ": 321} "
the server, JSON.parse (data), got the data Object
To distinguish this kind of data format of the modified Content-Type application / json
d) has developed a period of time, a simple string transmission is not satisfied and want to transfer files, word, excel, txt, pictures, documents streamed
by the content proposes a data format specified in binary data transmission
and modify Content-Type of multipart / form-data
e）。。。。。
Summary Content-type:
. 1) text / Plain; charset = UTF-. 8
2) file application / X-WWW-form-urlencoded browser FormData reflect
3) application / json browser requestPayload reflect
. 4) multipart / form-Data
. 5 ). . . . . .
Previous java server, the code for the sake of simple, predetermined data format is transmitted string application / x-www-form- urlencoded ,
so $ .ajax and form submission form are the default application / x-www-form- urlencoded
And the subsequent emergence of various java frameworks, such as spring, can solve a variety of ways transmission parameters, such as application / json
subsequent second generation / three generations ajax, as with the Axios vue, will modify the default Content-Type is application / json ,
Examples:
Vue project Axios if used, the java brother does not receive parameters, then
1) must be modified type of content-type file application / X-form-urlencoded WWW-
2) reduction of key data format, through the module qs (no need to install, node comes) to convert the data format
Here follows :( is disposed in the interceptor, their specific circumstances) the shining process
axios.defaults.headers.post [ 'Content-Type'] = 'application / x-www-form-urlencoded; charset = UTF- 8';
axios.interceptors.request.use(config => {
if(config.method === 'post'){
config.data = qs.stringify(config.data);
}
return config
}, error => {
// Do something with request error
Promise.reject(error)
})
Ajax other classes also solve the same.