What should I do if php $_post cannot accept axios?

With the popularity of front-end and back-end separation, more and more developers are using front-end frameworks such as Vue and React, and using axios as a tool for the front-end to send requests to the back-end. However, sometimes we encounter a situation: when using axios to send a POST request, the backend cannot receive the data correctly. This is related to the axios configuration method we use on the front end.

This article will introduce a possible situation: using axios to send a POST request, the backend cannot receive the data correctly. At the same time, we will provide a workaround, a solution designed to help readers better cope with similar situations.

Problem description
When using Vue axios to develop projects, we usually use axios.post() to send a POST request. This POST request carries the data we need to send. . The specific code example is as follows:

axios.post('/api/submit', {
    name: '张三',
    age: 25
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

On the backend, $_POST will be used to receive the data carried in this request. An example is as follows:

$name = $_POST['name'];
$age = $_POST['age'];

However, when we send a POST request, the backend cannot receive the data correctly.

Cause of the problem
The reason for this problem is that axios uses the application/json format to transfer data by default when sending a POST request, while the backend uses $_POSTWhen receiving data, the data needs to be passed in the application/x-www-form-urlencoded format to receive it correctly. If the data format is different, the backend will not be able to parse the data correctly.

Solution
In order to solve this problem, we need to modify the default request header when axios sends a request so that it becomes application/x-www-form-urlencoded, The specific method is as follows:

1. Add configuration in the axios request interceptor and set the Content-Type of the request header to application/x-www-form-urlencoded.

axios.interceptors.request.use(config => {
    if (config.method === 'post') {
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    }
    return config;
});

2. URL encode the data parameter in the axios.post() method.

axios.post('/api/submit', qs.stringify({
    name: '张三',
    age: 25
}))
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

The modified code example is as follows:

axios.interceptors.request.use(config => {
    if (config.method === 'post') {
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    }
    return config;
});

axios.post('/api/submit', qs.stringify({
    name: '张三',
    age: 25
}))
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

After the above operations, we can correctly send the POST request to the backend and successfully receive the data.

Summary
When using axios to send a POST request, the backend cannot receive the data correctly. This is usually because axios uses the application/json format to transfer data by default when sending a request. , and when the backend uses $_POST to receive data, the data needs to be passed in the application/x-www-form-urlencoded format to be parsed correctly. In order to solve this problem, we need to configure the axios request interceptor, set the Content-Type in the request header to application/x-www-form-urlencoded, and set the axios.post() method The data parameters in are URL encoded.

The above is the detailed content of What should I do if php $_post cannot accept axios?. For more information, please follow other related articles on the PHP Chinese website!