Solve the problem that the back-end post request does not use the body json object to pass parameters but uses query to pass parameters

This problem still stems from the fact that I know too little about content-type 

I always think that post requests can only pass json objects, and get is the splicing key=value. Until I saw that the back-end post request in the api document of the project turned out not to be the request body but to "splice the url", as shown in the following figure:

I vowed to find the back end, but in the end it turned out that I knew too little. Hereby record.

1. The project uses axios, about the difference between params and data when axios sends a request:

1. params is added to the request string of the url and used for get requests.

2. The data is to add the json object to the request body (body) for post request.

3. Get request can only pass query parameters, and query parameters are all spelled on the request address.
4. Post can pass both body and query parameters

Note: get cannot pass data

In the get request, axios will parse the objects we pass into the form of url splicing

For post request, if you want to use key-value pair data to pass parameters, such as the form of key1=value1&key2=value2, there are two implementation methods

(1) It can be realized by the qs.stringify method of the qs library

(2) Pass params without data  

2. About content-type:

1. When the Content-Type is set to application/json, it is passed to the backend in the form of a json object

2. When the Content-Type is set to application/x-www-form-urlencoded or Content-Type: multipart/form-data, it will be sent to the backend in the form of key=value

3. The difference between the two is only because of the different Content-Type settings, not the data submission method. Both of these submissions will put the data bodyin, but the developer tools of the chrome browser will distinguish the display method according to this ContentType. At the same time, the back-end receiving method will be different.

3. The difference between the two encoding methods of form: application/x-www-form-urlencoded and multipart/form-data:

First, application/x-www-form-urlencoded is the default encoding method.

1. When the action of the form is get, the browser uses the encoding method of x-www-form-urlencoded to encode the form data into the form of key=value, and then splice this string to the back of the url, separated by?

2. When the action of the form is post, the browser encapsulates the form data in the http body, and then sends it to the server.

3. When there is no type=file, use the default application/x-www-form-urlencoded.

4. When there is type=file, use multipart/form-data encoding.

Fourth, the usage of the qs library is as follows:

1. npm installation

npm install qs 
// cnpm install qs

2. Import ( usually in the file that defines the http request )

import qs from 'qs'

3. Use (the following is a comparison of the two types of post packaged in the project)

// 拼接url 
post(path, data) {
    return this.init('POST', path, qs.stringify(data))

  }

// json对象
  postByJson(path,data){
    return this.init('POST', path, data,{
      'Content-Type': 'application/json'
    })
  }