Question

我正在尝试使用VueJS 2（带有axios）和Laravel 5.3进行简单的POST。当我尝试打印$request->all()时，我的方法总是返回一个空数组。

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

<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标头设置缺少一些东西，但我不确定它可能是什么。

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 - 发布请求始终为空

1 个答案: