Question

我试图通过vue-resource发送帖子请求，但我似乎无法弄清楚我做错了什么。

我使用Laravel 5.1处理请求。

以下jquery代码可以在我的Vue方法中正常工作。

 $.ajax({
        type: 'POST',
        url: '/purchase/save-cart-items',
        data: { 'purchaseItems' : purchaseItems},
        success: function (response) {
            if(response == "ok") {
                alert("Cart saved successfully.");   
            } else {
                alert('There was a problem saving this cart. Please try again.');
            }
        }
    });

但是，使用以下vue-resource post请求替换上面的jquery由于某种原因不起作用。我确定它很简单，但我似乎无法弄明白。 Vue-resource已正确包含在项目中，因为我将其用于获取请求而没有问题。

this.$http.post('/purchase/save-cart-items', {purchaseItems:purchaseItems}, function (data, status, request) {
    alert("Cart saved successfully.");
}).error(function (data, status, request) {
    alert('There was a problem saving this cart. Please try again.');
});

Answer 1

您可能缺少csrf令牌：

HTML

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

JS

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');

Answer 2

Vue的作者已停止更新和维护vue-resource。他自己也建议使用axios，axios更易于使用且易于维护。 axios introduction

如果您刚刚开始学习Vue，那么这是一个入门级演示。虽然它只是一个小应用程序，但它涵盖了很多知识点（vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack），包括前端，后端，数据库和其他网站对于我来说，学习重要意义的一些必要元素，希望互相鼓励！

Github Demo

Answer 3

代码应为：

this.$http.post('/purchase/save-cart-items', {purchaseItems:purchaseItems})
    .success(function (data, status, request) {
        alert("Cart saved successfully.");
    })
    .error(function (data, status, request) {
        alert('There was a problem saving this cart. Please try again.');
    });

Answer 4

代码应为：

 this.$http.post('purchase/save-cart-items', {purchaseItems:purchaseItems})
        .success(function (data, status, request) {
            alert("Cart saved successfully.");
        })
        .error(function (data, status, request) {
            alert('There was a problem saving this cart. Please try again.');
        });

或尝试使用tymon / jwt-auth软件包

Vue和Vue资源

4 个答案: