はCSRF VueJs

<div id="new"> 
      <form class="form-horizontal" role="form" enctype="multipart/form-data" method="POST" v-on:submit.prevent="addPost"> 
      <h4>@{{message}}</h4> 
      <div class="form-group" style="padding:14px;"> 
       <textarea v-model="content" class="form-control" placeholder="Update your status"> </textarea><br> 
       <button class="btn btn-primary pull-right" type="submit">Post</button> 
      </div> 
      </form> 
     </div>

以下のように私のhome.bladeファイルと

const app = new Vue({ 
    el: '#new', 
    data: { 
     message: 'Update New Post:', 
     content: '', 
    }, 

    methods:{ 

     addPost(){ 
      axios.post('/home/addPost', { 
       content: this.content 
      }) 
      .then(function(response) { 
       console.log(response); 
      }) 
      .catch(function(error) { 
       console.log(error); 
      }); 
     } 
    } 
});

以下のようにVUEの私app.jsを使用してlaravelにエラーが見つかりませんし、私は、Webでルートを作成しています。

Route::post('addPost', '[email protected]');

と

以下のようなコントローラ以下のようなPHP

public function addPost(Request $request) { 

     $content = $request->content; 

     $createpost = DB::table('post') 
      ->insert(['content' => $content, 
       'user_id' => Auth::user()->id, 
       'status' => 0, 

      ]); 

    }

が、私はこの権利は、あなたがポストAJAXリクエストを送信する場合のデータで_tokenフィールドを追加する必要があり、私

app.js:11623 CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token 

app.js:893 POST http://127.0.0.1:8000/home/addPost 404 (Not Found) 
Error: Request failed with status code 404 
    at createError (app.js:918) 
     at settle (app.js:41630) 
     at XMLHttpRequest.handleLoad (app.js:792)

出典

2017-10-16 Anonymous

助けてくださいすることができますどのようにコンソールには以下のようなエラーが発生します。

data: { 
     message: 'Update New Post:', 
     content: '', 
     _token: '{{csrf_token()}}' 
    },

出典

2017-10-16 05:32:00

laravelにリクエストする前に、csrfトークンをリクエストに追加する必要があります。 Ajaxを使用する際の課題は、このトークンを手動で指定する必要がある場合です。そうしないと、リクエストは受け入れられません。このメソッドは現在私のために働く。あなたはVueのは、以降のすべての要求でCSRFトークン

//App.js 

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf_token"]').getAttribute('content'); //add token; 


const app = new Vue({ 
    el: '#new', 
    data: { 
     message: 'Update New Post:', 
     content: '', 
    }, 

    methods:{ 

     addPost(){ 
      axios.post('/home/addPost', { 
       content: this.content 
      }) 
      .then(function(response) { 
       console.log(response); 
      }) 
      .catch(function(error) { 
       console.log(error); 
      }); 
     } 
    } 
});

を含めるように語っている：あなたのVueJsコードの先頭にこれを追加

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>My App</title> 
    <meta name="csrf_token" content ="{!!csrf_token()!!}" />

下に示したように、あなたのHTMLで、コードは次の行<meta name="csrf_token" content ="{!!csrf_token()!!}" />を追加します

出典

2017-10-16 05:32:39

はCSRF VueJs

答えて

関連する問題