Axios submit data to flask data format problem

The HTTP protocol stipulates that the data submitted by POST must be placed in the message body (entity-body), but the protocol does not stipulate what encoding the data must use. The four common encoding methods are as follows: 
1. application/x-www-form-urlencoded 
This should be the most common way to submit data by POST. The browser's native form, if the enctype attribute is not set, will eventually submit data in the form of application/x-www-form-urlencoded. The request looks like this (irrelevant request headers are omitted from this article):

POST http://www.example.com HTTP/1.1    Content-Type:
application/x-www-form-urlencoded;charset=utf-8
title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

2. Multipart/form-data 
This is another common way of POST data submission. When we use the form to upload files, we must make the enctyped of the form equal to this value, the following is an example

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"
title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

3. 
The Content-Type of application/json application/json is familiar to everyone as a response header. In fact, more and more people now use it as a request header to tell the server that the message body is a serialized JSON string. Due to the popularity of the JSON specification, all major browsers except low-level IE natively support JSON.stringify, and the server-side languages ​​also have functions for processing JSON, so you will not encounter any trouble when using JSON.

4. text/xml 
It is a remote calling specification that uses HTTP as the transmission protocol and XML as the encoding method.

 

get submit, use params to pass parameters, flask use values ​​to get the data

word_id = request.values.get('word_id', default='')

axios.get(url, {
  params: {
    word_id
  }
}).then(
  (response) => console.log(response.data),
  (err) => console.log(err)
)

 

Post submission, if you use the native method, you need to use data to obtain, and the data is in binary format

print(request.data)
b'{"word_id":6692}'

axios.post(url,
    {
      word_id
    }
).then(
  (response) => console.log(response),
  (err) => console.log(err)
)

axios passes data when submitting using post

 

Use qs for transcoding, so that both values ​​and forms can be used for extraction

word_id = request.form.get('word_id', default='')
word_id = request.values.get('word_id', default='')

console.log(qs.stringify({name: 'abcd',age:15}))
name=abcd&age=15

axios.post(url,
  qs.stringify(
    {
      word_id
    }
  )
).then(
  (response) => console.log(response),
  (err) => console.log(err)
)

 

 

Use the interceptor to handle the request post parameter problem. In the post method, you can directly use the original parameter form

axios.interceptors.request.use(function (config) {
  if (config.method == 'post') {
    console.log(config.data)
    config.data = qs.stringify(config.data)
    console.log(config.data)
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});

{ word_id: 6692 }
word_id=6692

axios.post(url,
  {
    word_id
  }
).then(
  (response) => console.log(response),
  (err) => console.log(err)
)