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");

リローデッドページに関連する私のコードであり、それは示しています

VerifyCsrfToken.phpライン68で210
TokenMismatchException：

私はいくつかの研究を行なったし、私は私が提出する一つ一つの形でcsrf_tokenを追加し、ちょうど頭メタタグにそれを置く必要があるために持っていけないことがわかりました。しかし、それは動作していないようです。どのように設定する必要がありますか？

EDIT＃1

私は研究のビットを行なったし、attr("content")にattr("value")を変更したが、同じ問題が私に起こります。

出典

2017-02-04 warmjaijai

@Saurabh help please – 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メソッドの送信

答えて

関連する問題