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..

Answer 1

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

1. You are sending JSON, not application/x-www-form-urlencoded so remove that Content-type request header. Axios defaults to application/json

2. 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'
   }
   

3. 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.

4. 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

5. 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.

6. 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.