VueJS and Laravel - post request always empty

Question

I'm trying to make a simple POST using VueJS 2 (with axios) and Laravel 5.3. My method always returns an empty array when I try to print $request->all().

I have the following meta tag in my blade template:

<meta name="csrf-token" content="{{ csrf_token() }}">

I'm loading axios and adding the X-CSRF tag to it in bootstrap.js:

window.Vue = require('vue');
window.axios = require('axios');

require('vue-axios');

window.axios.defaults.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')

And this is my Vue component (narrowed it down for clarity):

<template>
    <div class="options">
        <div class="save-result" @click="saveResult()">
            Save result
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            saveResult: function() {
                axios.post('/api/user/save-results', {'test': 'testing'}).then(response => {
                    console.log(response.message)
                })
            }
        }
    }
</script>

This route leads to a very simple controller where I'm just printing my request, which is empty.

public function saveResults(Request $request)
{
    echo '<pre>'; print_r($request->all()) and die();
}

I'm guessing something is missing with my CSRF header setup, but I'm not sure what it might be.

Have your checked the network tab in your browser console to see if any data is being sent? — Rwd
Turns out the problem was I was sending a "regular" array as the second parameter of axios' post method, and it should be an object. I'll post the answer below. I'm not sure why this isn't implicitly set up though, any idea why? — Anonymous

Anonymous Anonymous · Accepted Answer · 2017-02-21T00:32:42

Turns out the problem was I was sending an array as the second parameter of axios' post method, and it should be an object.

I took advantage of an ECMAScript 6 polyfill, Object.assign:

let params = Object.assign({}, this.$store.getters.params)

axios.post('/api/user/save-results', params).then(response => {
     console.log(response.message)
})

VueJS and Laravel - post request always empty

1 Answers