Error in post request json and application/x-www-form-urlencoded in axios

The front-end axios sent a post request and kept reporting an error. I spent an afternoon (just started to step into the front-end learning). Finally, this article solved the problem of post request json and application/x-www-form-urlencoded in axios - Shepherd Wolf - Blog Garden ( cnblogs.com) https://www.cnblogs.com/edwardwzw/p/11694903.html

When the front end transmits data to the back end:

If it is a get transmission, directly pass it after the url;

If it is a post transmission, it will be transmitted in the request body.

There are two data formats in the body , one is json data format, and the other is string. Which format to use depends on the format of the backend input parameter.

If the backend receives the json data type, the headers of the post need to be set { 'content-type': 'application/json' }, and the data passed to the backend is in the form of { 'name':'edward', 'age':'25 ' }

If the backend receives a (form) string type, the headers of the post (default) are set to { 'content-type': 'application/x-www-form-urlencoded' }, and the data transmitted to the backend is in the form of' name=edward&age=25'

qs.stringfy() converts the object sequence into URL form (string)

Because the default data format of axios is json, so:

1. When the backend needs to receive data in json format, the post request header does not need to set the request header, and the data format does not require us to convert (if the data is already json);

2. When the backend needs to receive data in string format, we need to set { 'content-type': 'application/x-www-form-urlencoded' } for the post request header,

If the input parameter we pass is a js object, we need to use qs to convert the data format. The specific usage of qs is as follows:

Install module: npm i qs -S

import qs from 'qs';
const data = { name:'edward' , age:'25'};  // 我们传的是 js 对象
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),   // 用 qs 将js对象转换为字符串 'name=edward&age=25'
  url: 'http://www.edward.com'
}; 
axios(options);

We can also set qs globally for axios when encapsulating it

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

[Distinction]: JSON.stringfy() and qs.stringfy()

let data = { name: 'edward', age: '25' }

Former: JSON.stringfy(data) // ”{ 'name' : 'edward' , 'age' : '25' }”

The latter: qs.stringfy(data) // 'name=edward&age=25'

[Distinction]: The default content-type value of $.ajax post request VS axios post request in jQuery

The former: "application/x-www-form-urlencoded"

The latter: "application/json"

$.ajax({
   type: 'POST',
   contentType: 'application/json;charset=utf-8', // 发送的数据类型
   dataType: 'json',   // 接收的数据类型
   url: 'http://www.edward.com',
   data: JSON.stringfy(formData),
   success: function (res) {
      console.log(res.data)
   }
})

contentType: Tell the server what type of data I want to send

dataType: Tell the server what type of data I want. If not specified, it will automatically infer whether to return XML, JSON, script, or String.

Note: $.ajax() post data sent to the server. Will be automatically converted to request string format .

If it is an object, such as { name: 'edward', age: '25' }, jQuery will automatically convert it to 'name=edward&age=25'

If it is an array, jQuery will automatically assign the same name to different values. For example {foo:["bar1", "bar2"]} translates to '&foo=bar1&foo=bar2'.

Author: Shepherd Wolf

Source: Shepherd Wolf- Blog Garden

Error in post request json and application/x-www-form-urlencoded in axios

Guess you like