VueJS 和 Laravel - post 请求总是空的

Question

我正在尝试使用 VueJS 2（带有 axios）和 Laravel 5.3 制作一个简单的 POST。当我尝试打印 $request->all().

时，我的方法总是 returns 一个空数组

我的 blade 模板中有以下元标记：

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

我正在加载 axios 并在 bootstrap.js 中添加 X-CSRF 标签：

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')

这是我的 Vue 组件（为清楚起见缩小范围）：

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

这条路线通向一个非常简单的控制器，我只是在其中打印我的请求，它是空的。

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

我猜我的 CSRF header 设置中缺少某些东西，但我不确定它可能是什么。

Answer 1

原来问题是我发送了一个数组作为 axios post 方法的第二个参数，它应该是一个对象。

我利用了 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 和 Laravel - post 请求总是空的

VueJS and Laravel - post request always empty

vue.js

laravel-5.3

vuejs2

csrf-protection

axios