Unable to retrieve the data from a GET Request with Symfony

Question

I want to be able to access the data of a parameter I'm passing in a GET request using Axios. This is what I have on the front end:

window.onload = function(){
        var link = document.getElementById('link');
        link.addEventListener('click', function(){
            onClickCorrection(this);
        });

        function onClickCorrection(element){
            event.preventDefault();
            const href = element.getAttribute('href');

            axios({
                method:'get',
                url: href,
                data:'true'
            })
            .then(function (response){
                console.log(response);
            })
            .catch(function (error){
                console.log(error);
            })
        }
    }

And this is what I have in my controller:

public function corrigerExercice(Exercice $exercice, Request $request) : Response {

        $test = $request->query->get('data');
        if ($test == "true") {
            $message = "Contains true";
        }
        else {
            $message = "Does not contain true";
        }
        return $this->json(['code' => 200, 'message' => $message, 'contenu' => $test], 200);
    }

So basically, I'm passing data as 'true' , yet when I see the response of the server in my Firefox console, I see that the contenu parameter is set to null . In other words, $test in my controller is null. And I don't understand why.

You can see the response from the server:

config: Object { url: "/corrigerExercice/1", method: "get", data: "true", … }
​
data: Object { code: 200, message: "Does not contain true", contenu: null }
​
headers: Object { "cache-control": "no-cache, private", "content-length": "61", "content-type": "application/json", … }
​
request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }
​
status: 200
​
statusText: "OK"

I don't see where my mistake is, anybody could help me on that please?

Answer 1

I don't think writing event.preventDefault(); in onClickCorrection() is right

I'd write like this instead

window.onload = function(){
    var link = document.getElementById('link');
    link.addEventListener('click', function(e){
        e.preventDefault();
        onClickCorrection(this);
    });

    function onClickCorrection(element){
        const href = element.getAttribute('href');

        axios({
            method:'get',
            url: href,
            data:'true'
        })
        .then(function (response){
            console.log(response);
        })
        .catch(function (error){
            console.log(error);
        })
    }
}

Answer 2

I assume you have some misconception about the difference between POST and GET.

POST data is submitted in the body of the request, while GET data is submitted as part of the URI. These are fundamentally different and may even be combined.

Meaning, your GET request with "data" set to "true" should go to the URI /corrigerExercice/1?data=true . however, your request clearly states that this is not the case. After a quick glance into the axios source , it looks not into the data key of your config, but the params key, as could have been gathered by looking at the example for GET requests .

So your axios call should look like this:

        axios({
            method:'get',
            url: href,
            params: { data:'true' } 
        })