Question

devs。我正在运行本地apache服务器。有静态Vue文件和带有某些脚本的'print'文件夹。我正在尝试将Vue的http请求（通过axios）发送到“打印”文件夹。

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

这是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

这里有两个问题，我将按顺序解决。

您正在发送JSON，而不是application/x-www-form-urlencoded，因此请删除该Content-type请求标头。 Axios默认为application/json
Axios默认情况下期望响应为JSON，但您的PHP脚本以纯文本响应。将您的config更改为
```
const config = {
  responseType: 'text'
}
```
您正在使用json_encode()，而您应该使用json_decode()。前者将PHP数据结构转换为JSON格式的字符串。后者则相反。
预感，如果您使用的是类似
```
<form @submit="postData" action="/print">
```
然后您需要将其更改为
```
<form @submit.prevent="postData">
```
以防止表单正常提交。如果您将表单提交按钮与@click处理程序一起使用，则同样适用。或使用type="button"，因此默认情况下不会提交。

请参见https://vuejs.org/v2/guide/events.html#Event-Modifiers
您的网络服务器可能正在执行从/print到/print/index.php的重定向，将您的POST请求转换为GET。为确保不会发生这种情况，请在URL中使用完整路径。
假设一切在您的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。

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

1 个答案: