[Pit] Axios sends a request and reports a 400 error. It is no problem to use postman to test the request.

Table of contents

 

reason:

Solution:

Method 1: Solve at the front end

Method 2: Solve in the backend

---

Reason: Caused by request header error

The Content-Type of the request header sent by axios defaults to application/json;

The postman default is application/x-www-form-urlencoded

 

Solution:

Method 1: Solve at the front end

Reference link: Axios sends a post request and returns a 400 status code

Use the qs library to serialize data

Refer to the code in the link:

axios.interceptors.request.use(config => {
  // 如果不是FormData类型，且为post请求，则进行数据的序列化
  if (Object.prototype.toString.call(config.data) !== '[object FormData]' && config.method === 'post') {
    // 请求拦截器处理
    config.data = qs.stringify(config.data)
  }
  return config
}, (err) =>{
  return Promise.reject(err);
})

Note: If you press the reference link here, there is a problem. When I did the file upload function later, I encountered a problem when I used the post request to pass the parameter of the FormData type. The parameter of the FormData type cannot be serialized.

about qs

Reference link: Vue's qs use detailed explanation

---

Method 2: Solve in the backend

Reference link: Solve the problem that axios sends a post request and returns a 400 status code

Because the Content-Type of the request header sent by axios defaults to the application/json type, so use the @RequestBody annotation to receive it when receiving it at the backend