Vue 2 Laravel 5.3 POST 方法提交令牌不匹配答案

【问题标题】：Vue 2 Laravel 5.3 POST method submit with token mismatchVue 2 Laravel 5.3 POST 方法提交令牌不匹配
【发布时间】：2017-06-21 13:52:49
【问题描述】：

不确定如何正确设置csrf_token。这是我的相关代码

Item-card.vue

<template>
.....
.....
    <input v-if="selected == 'name' + product.id" v-model="name" type="text" class="form-control" aria-describedby="basic-addon1" @blur.prevent="updateName">
    <form id="update-product-name" :action="'http://localhost:8000/updateProductName/'+product.id" method="POST" style="display: none;">
.....
.....
</template>
<script>
.....
.....
   methods:{
      updateName(){
        document.getElementById('update-product-name').submit();
      }
   }
.....
.....
</script>

app.blade.php

<head>
.....

    <!-- CSRF Token -->
    <meta id="token" name="csrf-token" content="{{ csrf_token() }}">
.....
</head>

app.js

Vue.http.headers.common['X-CSRF-TOKEN'] = $("#token").attr("value");

重新加载页面并显示：

VerifyCsrfToken.php 第 68 行中的 TokenMismatchException：

我做了一些研究，发现我不必在我提交的每个表单中添加csrf_token，只需将其放在头部元标记中即可。但是，它似乎不起作用。应该如何设置？

编辑#1

我做了一些研究并将attr("value") 更改为attr("content")，但同样的问题发生在我身上。

【问题讨论】：

@Saurabh 请帮忙
您没有使用Vue.http 提交表单，因此它不会包含标题。
感谢您的回复@RossWilson！那么你会建议我做什么来提交表单呢？
看看你的代码，我假设你有 vue 资源，所以我建议使用它。 github.com/pagekit/vue-resource/blob/develop/docs/http.md
`哦耶！我一直在使用它来获取方法，但我从来没有想过这个上帝的缘故……我已经像这样被困了 2 天了。让我先试一试

标签： laravel-5.3 vuejs2 csrf

【解决方案1】：

正如我在 cmets 中提到的，您收到 TokenMismatchException 的原因是因为没有发送 csrf 标头。

Vue.http.headers.common['X-CSRF-TOKEN'] = $("#token").attr("content");

以上将允许您在使用 Vue-Resource 时包含 csrf 标头。

您需要更改表单的行为，以便使用 vue/vue-resource 提交，而不是使用默认的浏览器提交。

一种方法是：

updateName() {

    let data = {
        //Add the data you want to be sent in the request here e.g.
        //name: this.name
    }

    this.$http.post('/updateProductName/' + this.product.id, data)
        .then(r => {
            //Do something on success
        })
        .catch(r => console.log(r))
}

希望这会有所帮助！

【讨论】：