Cannot recieve Post data sent from Vue via axios to PHP

Question

devs. I am running a local apache server. There are static Vue files and 'print' folder with some script. I am trying to send an http request from Vue (via axios) to 'print' folder.

I have tried to use vue-resourse to send data, but I had the same problem.

Here is a Vue method:

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);
        });
    }

The index.php file from print folder:

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

Here are some screensots from network tab (sorry for quality) I am not sure why devtools treats request like GET, but I use POST

When I log the response into console it looks like that. Here the response is actually POST. But the data is still missing.

Prview tab looks like that.

Request actually reaches the file, but $postBody is simply an empty string. I guees the problem is that ("php://input") does not get any input. When echo count($_POST) 0 is returned. Thanks for any help..

Your screenshot shows a GET request to `/print` but you're using `axios.post`. That doesn't make sense. Are you sure you're using your `postData` method to trigger the request — Phil, Apr 07 '19 at 05:11
It is strange. Yes, postData is used for sure. When I log the responce inso console it shows that method is actually POST. May be the problem is in devtools. — Адильхан Сатемиров, Apr 07 '19 at 05:38
Make sure your _Network_ console is open, then trigger `postData`. You should see a POST request appear. Also, what triggers `postData`? It wouldn't happen to be a `
` submit? — Phil, Apr 07 '19 at 05:40
`json_encode()` in your PHP should be `json_decode()`. See my answer below — Phil, Apr 07 '19 at 05:47
`` this button is a trigger for postData. I trigger it, but Network tab still shows request to be GET. While callback function show it to be POST as in picture. — Адильхан Сатемиров, Apr 07 '19 at 06:08
Is that a button in a form? If so, see the note in my answer about adding the ".prevent" event modifier — Phil, Apr 07 '19 at 09:11
Thank you very much @Phil. It is very strange but, the problem was in the directory address. The GET request was made when `/print` is typed. After changing it to `/print/index.php` everything worked out and POST request was made. @Phil, edit the answer adding this point and I will tick answer as correct one. After your tips I have learned much stuff. God bless you.. — Адильхан Сатемиров, Apr 07 '19 at 11:13
Sounds like a web server misconfiguration. I've updated my answer — Phil, Apr 07 '19 at 11:21

score 1 · Accepted Answer · edited Jul 15 '22 at 06:03

There's a couple of problems here which I'll address in order.

You are sending JSON, not application/x-www-form-urlencoded so remove that Content-type request header. Axios defaults to application/json
Axios by default expects the response to be JSON but your PHP script is responding with plain text. Change your config to
```
const config = {
  responseType: 'text'
}
```
You are using json_encode() where you should be using json_decode(). The former turns a PHP data structure into a JSON-formatted string. The latter does the opposite.
On a hunch, if you're using something like
```
<form @submit="postData" action="/print">
```
then you need to change it to
```
<form @submit.prevent="postData">
```
to prevent the form from submitting normally. Same goes for if you're using a form submit button with @click handler. That or use type="button" so it won't submit by default.

See https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers
Your web server may be performing a redirect from /print to /print/index.php, transforming your POST request to GET. To be sure this doesn't happen, use the full path in your URL.
Assuming everything works in your PHP, $postBody will be an instance of stdclass, the result of json_decode(). Attempting to echo that out won't work very well. In fact, it will trigger an error like

Recoverable fatal error: Object of class stdClass could not be converted to string

but your error reporting level may not be set correctly for you to see. See How to get useful error messages in PHP?

If you'd just like to re-show the JSON, try
```
$postBody = json_decode(file_get_contents('php://input')); // returns a stdclass
echo 'Post: ', json_encode($postBody), ' here';
```
Note that the response will not be valid JSON due to your "Post: " and " here" output.

Thanks for answer. I have set `error_reporting=E_ALL` but still no message is displayed. I guess the problem is that simply nothing comes into `(php://input)`. I would appreciate futher suggestions :) — Адильхан Сатемиров, Apr 07 '19 at 04:49
@АдильханСатемиров check your browser's _Network_ console. Find the AJAX request and inspect the request headers and body. Post some screenshots in your question — Phil, Apr 07 '19 at 04:50
@АдильханСатемиров also, if you want to see errors in the PHP output, you need `display_errors=On`. Also don't forget to restart Apache if you're changing `php.ini` — Phil, Apr 07 '19 at 04:51

Cannot recieve Post data sent from Vue via axios to PHP

1 Answers1