Vue项目之PHP无法获取来自axios的数据

问题描述

前两天做Vue项目的时候，本来打算通过php实现登陆和注册功能，结果在使用axios发起请求的时候，php后台接收到的数据$_POST始终为null。在网上浏览了许多篇技术文章，才明白是因为axios请求的数据格式和$_POST能够接收的数据格式不一致。于是我尝试了几种来自网上大神的办法：

解决过程

• qs（失败）

import qs from "qs"
var axiosAjax = axios.create({
    baseURL:'/',
    transformRequest: [function (data) {
        data = Qs.stringify(data);
        return data;
    }],
    headers:{
        'Content-Type':'application/x-www-form-urlencoded'
    }
})

• php://input（失败）

var params = {
    username: 'admin',
    password: '123456'
}
axios.post('test.php', params).then(res => console.log(res.data))

$data = file_get_contents("php://input");

• URLSearchParams（失败）

var params = new URLSearchParams();
params.append('username', 'admin');
params.append('password', '123456');
axios.post('test.php', params).then(res => console.log(res.data));

• encodeURIComponent（失败）

var params = 'ajax='+encodeURIComponent(JSON.stringify({
    username: 'admin',
    password: '123456'
}));
axios.post('test.php', params).then(res => console.log(res.data))

var_dump(json_decode(urldecode($_POST['ajax'])));

最终解决方法

最终尝试了最后一种方法：将请求数据转换为FormData格式，终于解决了这个问题，代码如下：

//js
post () {
      var data = new FormData()
      data.append('username', this.username)
      data.append('password', this.password)
      axios.post('/weather/login.php', data).then(res => {
        console.log(res.data)
      })
}

//php
<?php
    //从前端获取登陆信息
    $username = $_POST['username'];
    $password = $_POST['password'];
?>

希望能够帮助到你。