Vue与PHP联调出现$_POST未定义索引错误，请问我的代码哪里有问题？

axios默认POST请求会将参数序列化为JSON格式，请求头Content-Type为application/json，而PHP原生$_POST全局变量仅支持解析application/x-www-form-urlencoded、multipart/form-data两种格式的请求数据，无法识别JSON格式的参数，因此会抛出索引未定义的报错。

两种方案二选一即可：

方案1：修改前端请求参数格式，适配PHP原生$_POST读取规则 #

无需修改后端代码，将前端axios请求的参数转为application/x-www-form-urlencoded或multipart/form-data格式即可，示例如下：

使用FormData构造参数（无需额外依赖） #

const API_URL = "http://localhost:8880/php/";
const formData = new FormData();
formData.append('optn', 'procdata');
formData.append('mdate1', this.mdate1);
formData.append('mdate2', this.mdate2);
formData.append('mmcc', '');

axios({
  method: "post",
  url: API_URL + "test.php",
  data: formData
}).then((response) => {
  console.log(response);
});

使用qs库序列化参数（需提前安装qs依赖） #

import qs from 'qs'
const API_URL = "http://localhost:8880/php/";
axios({
  method: "post",
  url: API_URL + "test.php",
  data: qs.stringify({
    optn: "procdata",
    mdate1: this.mdate1,
    mdate2: this.mdate2,
    mmcc: "",
  }),
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then((response) => {
  console.log(response);
});

方案2：修改后端解析逻辑，直接读取JSON格式请求体 #

无需修改前端代码，后端读取原始请求体解析为关联数组即可：

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Content-Type");
header('Access-Control-Allow-Methods: POST, GET, DELETE, PUT, PATCH, OPTIONS');
header('Access-Control-Allow-Headers: token, Content-Type');

// 读取原始请求体并解析为关联数组
$postData = json_decode(file_get_contents('php://input'), true);
echo $postData['optn'];
echo $postData['mdate1'];
echo $postData['mdate2'];
echo $postData['mmcc'];

注：json_decode第二个参数设置为true才会返回关联数组，否则返回对象需要用$postData->optn的方式读取属性

内容的提问来源于stack exchange，提问作者Kvr Technologies