Axios sends a POST request, and the back end does not receive a solution for the parameters

Problem scenario

The scenario is simple, just a normal AXIos POST request:

axios({
    headers: {
        'deviceCode': 'A95ZEF1-47B5-AC90BF3'
    },
    method: 'post',
    url: '/api/lockServer/search',
    data: {
        username,
        pwd}})Copy the code

The background says it did not receive your parameter. This is a little strange, I looked at the browser request message is OK, the parameters are all there, and before using Axios there was no problem. But this interface is universal, other people use, is OK, the interface is OK.

Question why

The point 1

The reason for this is that the interface is using Java Spring MVC and the @requestParam annotation is used on this method so what does this mean? That is, you can only parse parameters from strings like username=admin&password=admin.

The point 2

We can also see the content-type of our request: application/json; Charset = utF-8 One thing to note about this is:

1. Axios will help us transform request and response data and automatically transform JSON data

2. Find the following in the AXIos source code:(Critical)

We know that when we make a POST request, we pass data: {… } or just {… }, well, these are the two forms

【 Form 1 】

【 Second form 】

Very excitingly, both of these forms trigger the [critical] section of axios’s source code

Problem analysis

That is, our Content-Type becomes application/json; Charset = UTF-8 Then, since our argument is a JSON object, Axios does a stringify for us. And a look at the AXIos documentation shows that when AXIos sends data using POST, the default is to put JSON directly into the request body and submit it to the back end.

So this doesn’t match our server requirements of ‘Content-Type’: ‘application/ X-www-form-urlencoded ‘and @requestParam

The solution

Solution 1

【 useURLSearchParamsTransfer parameters 】

let param = new URLSearchParams()
param.append('username'.'admin')
param.append('pwd'.'admin')
axios({
    method: 'post',
    url: '/api/lockServer/search',
    data: param
})
Copy the code

Note that URLSearchParams does not support all browsers, but the overall support is OK, so this straightforward solution is preferred

Solution 2

Said there are many online scheme using axios. Defaults. Headers. Post [‘ the content-type ‘] = ‘application/x – WWW – form – urlencoded’; Headers :{‘ content-type ‘:’application/x-www-form-urlencoded’}} I have tried it, but it still won’t work This library is included with Axios, so you don’t need to download it anymore.

import Qs from 'qs'
let data = {
    "username": "admin"."pwd": "admin"
}

axios({
    headers: {
        'deviceCode': 'A95ZEF1-47B5-AC90BF3'
    },
    method: 'post',
    url: '/api/lockServer/search',
    data: Qs.stringify(data)
})
Copy the code

Solution 3

Since axios has a key piece of code in the source code, we can also modify the transformRequest to achieve this.

In axios’s request configuration items, there is a configuration of transformRequest:

import Qs from 'qs'
axios({
    url: '/api/lockServer/search',
    method: 'post',
    transformRequest: [function(data) {// Perform any conversion on datareturn Qs.stringify(data)
    }],
    headers: {
        'deviceCode': 'A95ZEF1-47B5-AC90BF3'
    },
    data: {
        username: 'admin'.pwd: 'admin'}})Copy the code

Solution 4

[Rewrite an Axios instance to re-implement our own transformRequest]

import axios from 'axios'
let instance = axios.create({
    transformRequest: [function transformRequest(data, headers) {
        normalizeHeaderName(headers, 'Content-Type');
        if (utils.isFormData(data) ||
          utils.isArrayBuffer(data) ||
          utils.isBuffer(data) ||
          utils.isStream(data) ||
          utils.isFile(data) ||
          utils.isBlob(data)
        ) {
          return data;
        }
        if (utils.isArrayBufferView(data)) {
          return data.buffer;
        }
        if (utils.isURLSearchParams(data)) {
          setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded; charset=utf-8');
          returndata.toString(); } /* Change this */if (utils.isObject(data)) {
          setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded; charset=utf-8');
          let _data = Object.keys(data)
          return encodeURI(_data.map(name => `${name}=${data[name]}`).join('&'));
        }
        returndata; }],})Copy the code

Solution 5

axios.post('/api/lockServer/search',"userName='admin'&pwd='admin'");

Solution 6

We know that the server now uses @requestparam (parses the parameters from a string) to receive the parameters, but there is also @requestbody (gets the parameters from the RequestBody).

@requestBody = @requestBody (#^.^#)

Reprinted from www.cnblogs.com/yiyi17/p/94…