无法接收 Vue 通过 axios 发送到 PHP 的 Post 数据

Question

开发者。我正在运行本地 apache 服务器。有静态 Vue 文件和带有一些脚本的“打印”文件夹。我正在尝试从 Vue（通过 axios）向“打印”文件夹发送 http 请求。

我尝试使用 vue-resource 发送数据，但我遇到了同样的问题。

这是一个 Vue 方法：

postData: function() {
      const data = {
        firstName: "John",
        lastName: "Doe"
      };
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      };
      axios
        .post("/print", data, config)
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }

打印文件夹中的 index.php 文件：

<?php
$postBody = file_get_contents("php://input");
$postBody = json_encode($postBody);
echo 'Post: ',$postBody, ' here';

以下是网络标签中的一些屏幕截图（质量问题，请见谅） 我不确定为什么 devtools 将请求视为 GET，但我使用 POST

当我将响应记录到控制台时，它看起来像这样。这里的响应实际上是 POST。但数据仍然缺失。

“预览”选项卡看起来像这样。

请求实际上到达了文件，但$postBody 只是一个空字符串。我猜问题是("php://input") 没有得到任何输入。当echo count($_POST) 0 返回时。感谢您的帮助..

Answer 1

这里有几个问题我会按顺序解决。

1. 您发送的是 JSON，而不是 application/x-www-form-urlencoded，因此请删除 Content-type 请求标头。 axios 默认为application/json

2. 默认情况下，Axios 期望响应为 JSON，但您的 PHP 脚本以纯文本响应。将您的 config 更改为

   const config = {
     responseType: 'text'
   }
   

3. 您在应该使用json_decode() 的地方使用json_encode()。前者将 PHP 数据结构转换为 JSON 格式的字符串。后者则相反。

4. 如果你正在使用类似的东西

   <form @submit="postData" action="/print">
   

   那你需要改成

   <form @submit.prevent="postData">
   

   防止表单正常提交。如果您使用带有@click 处理程序的表单提交按钮，情况也是如此。或者使用type="button"，这样它就不会默认提交。

   见https://vuejs.org/v2/guide/events.html#Event-Modifiers

5. 您的网络服务器可能正在执行从/print 到/print/index.php 的重定向，从而将您的POST 请求转换为GET。为确保不会发生这种情况，请使用 URL 中的完整路径。

6. 假设在您的 PHP 中一切正常，$postBody 将是stdclass 的一个实例，json_decode() 的结果。尝试echo 不会很好地工作。其实会trigger an error点赞

   可恢复的致命错误：stdClass 类的对象无法转换为字符串

   但您的错误报告级别可能未正确设置以供您查看。见How to get useful error messages in PHP?

   如果您只想重新显示 JSON，请尝试

   $postBody = json_decode(file_get_contents('php://input')); // returns a stdclass
   echo 'Post: ', json_encode($postBody), ' here';
   

   请注意，由于您的 "Post: " and " here" 输出，响应将不是有效的 JSON。