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

不知道如何正确设置csrf_token。这里是我的代码相关Vue 2 Laravel 5.3 POST方法提交令牌不匹配

项目，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");

重装上阵页面，它显示：

TokenMismatchException在VerifyCsrfToken.php线68：

我做了一些研究，发现我不必在每一个表格我提出加csrf_token，只是需要把它的头部meta标签。但它似乎并不奏效。应该如何设置？

编辑＃1

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

来源

2017-02-04 warmjaijai

@Saurabh帮助请 – warmjaijai

您没有使用'Vue.http'来提交表单，所以它不会包含标题。 –

感谢您的回复@RossWilson！所以你建议我做什么来提交表单？ – warmjaijai

正如我在评论中提到的，你得到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)) 
}

希望这有助于！

来源

2017-02-07 08:15:16

这对我有很大的帮助！感谢您的帮助 – warmjaijai

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

回答

相关问题

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