解决vue中post方式提交数据后台无法接收的问题

当在 Vue 中使用 post 方式提交数据到后台时，有时候会出现后台无法接收到数据的情况。这可能是由于请求头未设置导致的。在这种情况下，您可以尝试以下两种解决方法：

解决方法一：设置请求头

在使用 post 方法向后台服务器请求数据时，在请求头部分添加 Content-Type 和 X-Requested-With 两个参数。这样后台服务器就能正确地接收到数据了。以下是示例代码：

// import axios
import axios from 'axios';

axios({
    method: 'post',
    url: '/api/submit',
    headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
    },
    data: {
        name: "vue",
        age: 18
    }
}).then(function(response){
    console.log(response.data);
}).catch(function(error){
    console.log(error);
});

在上述示例中，我们在请求头中设置了 'Content-Type': 'application/json' 和 'X-Requested-With': 'XMLHttpRequest' 两个参数。这两个参数分别用来告诉后台数据的格式和请求的类型。这样后台就能正确地接收到数据了。

解决方法二：使用formData

另一种解决方法是使用 formData 对象来提交 post 请求。这个对象是用来构建表单数据的。以下是示例代码：

// import axios
import axios from 'axios';

let formData = new FormData();
formData.append("name", "vue");
formData.append("age", "18");

axios.post('/api/submit', formData).then(function(response){
    console.log(response.data);
}).catch(function(error){
    console.log(error);
});

在上述示例中我们使用了 formData 对象来构建表单数据。我们首先实例化了 FormData 对象，然后用它的 append 方法向其中添加了要提交的数据。最后，我们使用 Axios 的 post 方法来提交数据。这样，后台服务器就能正确地接收到数据了。

以上就是解决 Vue 中 post 方式提交数据后台无法接收的问题的两种解决方法。您可以根据自己的实际情况来选择其中的一种方法来解决问题。