POST Requests with axios not sending parameters

Question

I am trying to POST some data from Vue.js to a backend based on Symfony using the following code.

       updateQuestion : function() {
            axios.post('/staff/question/api/' + this.id,{
                    id : 'test',
                    name : 'sree'
            })
                .then( response => {

                console.log(response);
            })
                .catch(error => {
                    console.log(error);
                })
        },

However, the parameters that I am attaching to the POST request are not reaching my controller. So, I tried the alternate format for POST requests and still, the parameters are not reaching the controller. Please tell me what's wrong.

Alternate format:

 updateQuestion : function() {
            axios({

                method : 'POST',
                url : '/staff/question/api/' + this.id,
                data: {
                    id : 'test',
                    name : 'sree'
                }

            })
                .then( response => {

                console.log(response);
            })
                .catch(error => {
                    console.log(error);
                })
        },

Solution 1

I also encountered this problem! My post data was found in the controller:

$request->getContent();

My vue script

onSubmit() {
  axios.post('/test/post/data', { test: "test" })
    .then(response => {
      console.log(response.data);
    });
},

My Symfony controller:

public function postData(Request $request)
{
    $data = $request->getContent();
    $data = json_decode($data, true);

    return $this->json($data);
}

Solution 2

Install FOSRestBundle to solve this problem.

composer require friendsofsymfony/rest-bundle

https://github.com/FriendsOfSymfony/FOSRestBundle

Using this bundle, incoming json requests will be automatically translated into an array, directly available in $request->request->all() or $request->request->get('myparam').

Documentation excerpt:

This bundle provides various tools to rapidly develop RESTful API's & applications with Symfony. Features include:

• A View layer to enable output and format agnostic Controllers
• A custom route loader to generate url's following REST conventions
• Accept header format negotiation including handling for custom mime types
• RESTful decoding of HTTP request body and Accept headers
• Exception controller for sending appropriate HTTP status codes

Solution 3

Instead of using $request->getContent(); you can do the following in your JavaScript file to be able to use $request->request->all() in your backend.

I needed this for writing tests, since $request->getContent(); is empty in my tests.

const params = new URLSearchParams();
params.append('id', 123456);
params.append('name', 'some name');

axios({
  method: 'post',
  url: '/staff/question/api/' + this.id,
  data: params
});

See also: https://github.com/axios/axios/issues/1195#issuecomment-347021460

Comments

[LiranC]

what do u mean by controller ? is it a symfony thing? like an endpoint?

[Praveesh]

Yes, the endpoint where the POST request is handled.

[Praveesh]

this.id is defined and the request hits endpoint corresponding to the value of the id. However, the request parameters are not reaching the end point.

[Praveesh]

Found the request data in $request->getContent(). This was something new to me. Is there any explanation why the request data is missing in $request->request->all() ?

[Breith]

Thank you for the solution. The @Bloops proposal should also be considered :)