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方法提交令牌不匹配