VueJS向PHP发送POST请求无法接收数据求助

你的核心问题出在PHP端的代码逻辑错误，以及对Axios发送JSON数据的处理逻辑不清晰，具体修正方案如下：

一、PHP代码修正 #

你当前的PHP代码错误地用curl请求自身，完全偏离了处理前端POST数据的逻辑，同时存在CORS头拼写错误，修正后代码如下：

<?php
// 修正CORS头拼写错误：X-Requested-Wurh → X-Requested-With
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, HEAD, OPTIONS, PUT");
header("Access-Control-Allow-Headers: Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

// 处理浏览器OPTIONS预检请求，直接返回避免报错
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    exit(0);
}

// 读取前端发送的JSON格式请求体
$rawRequestData = file_get_contents('php://input');
// 解析为关联数组
$requestData = json_decode($rawRequestData, true);

// 输出接收的数据用于调试
var_dump($requestData);
?>

关键说明： #

• php://input：Axios默认发送JSON格式数据，PHP的$_POST无法直接获取这类数据，必须通过读取原始请求体的方式获取。
• OPTIONS请求处理：跨域POST请求前，浏览器会先发OPTIONS预检请求，直接返回可避免跨域报错。

二、Vue/JS代码优化 #

你的JS代码整体逻辑没问题，但then的写法存在小问题，修正后确保在请求成功后打印响应数据：

updateCilent(){
  let data = {"name":"john","lastname":"doe"};
  axios
  .post('http://127.0.0.1/devphp/projet/action.php', data)
  .then(response => {
    console.log('请求成功，PHP返回数据：', response.data);
  })
  .catch(err => console.log('请求出错：', err));
},

关键说明： #

• then的参数必须是回调函数，这样才能拿到请求的响应对象response，response.data即为PHP返回的内容。

三、验证步骤 #

1. 替换修正后的PHP代码，重启本地服务。
2. 触发updateCilent方法，查看浏览器控制台的响应数据。
3. 可通过浏览器开发者工具的Network标签，查看POST请求的Payload，确认数据是否正常发送。

内容的提问来源于stack exchange，提问作者Lionel Ralf