CSRF令牌不匹配錯誤，Laravel 5.3/VueJS2

我試圖讓我建立做了一個應用程序的驗證部分。我使用Laravel 5.3和VueJs 2作爲我的JS框架。在我的登錄組件中，我有這方面的內容。CSRF令牌不匹配錯誤，Laravel 5.3/VueJS2

<template> 
    <form @submit="test" method="POST" action="/test"> 
     <input v-model='input' type='text'> 
     <button type='submit'>Submit</button> 
    </form> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       data: { 
        input: "hello" 
       } 
      } 
     }, 
     mounted() { 
      console.log('Component ready.') 
     }, 
     methods: { 
      test: function() { 
       this.$http.post('/test', { 
        headers: { 
         'X-CSRF-TOKEN': $('meta[name=_token]').attr('content') 
        } 
       }) 
       .then(res => { 
        console.log(res); 
       }) 
       .catch(err => { 
        console.error(err); 
       }); 
      } 
     } 
    } 
</script>

我也有CSRF標記設置爲我的HTML文檔的頭部元數據。 <meta name="_token" content="{{ csrf_token() }}">

Laravel 5.3's Illuminate \ Foundation \ Http \ Middleware \ VerifyCsrfToken吐出錯誤，表示存在令牌不匹配。我目前var_dump所有$請求信息傳遞到這個類'handle()函數。

public function handle($request, Closure $next) 
    { 
     var_dump($request); 
     if (
      $this->isReading($request) || 
      $this->runningUnitTests() || 
      $this->shouldPassThrough($request) || 
      $this->tokensMatch($request) 
     ) { 
      return $this->addCookieToResponse($request, $next($request)); 
     } 
     throw new TokenMismatchException; 
    }

我沒有看到CSRF令牌與我發送的ajax請求一起傳遞。奇怪的是，如果我不使用ajax並在表單標籤內部提交諸如{{csrf_field()}}的正常表單，中間件就會成功授權令牌。這導致我相信這是我使用的ajax/vue-resource的問題。我可能做錯了什麼，但我已經搜索了關於這個問題的谷歌文章/ stackoverflow/youtube視頻，但沒有解決錯誤。我已經做了一個解決方法，我強制XSRF-TOKEN cookie與令牌進行比較，但是這讓我想到安全問題，以及當用戶在使用應用程序時意外或不知不覺地刪除了他們的Cookie時會發生什麼。不知道這是否會導致錯誤，但我已經與其他開發人員/工程師交談過，並且他們說不強制將cookie比作中間件而不是CSRF_TOKEN。

這裏有一些其他的事情我已經試過。

//I've tried the vue.http.interceptors method that comes with the bootstrap.js file Laravel generates for vue js 2. 
Vue.http.interceptors() //something along those lines 
//Setting ajax setup in bootstrap.js as wel 

$.ajaxSetup({ 
    headers: { 
     'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') 
    } 
}); 

//I've also tried sending the token along with the vue-resource post request in the Vue component method as well. 

methods: { 
    test: function() { 
    this.$http.post('/test', {headers: 'X-CSRF-TOKEN: $('meta[name='_token']'.attr('content')} 
    ).then(response => console.log(response)); 
    } 
} 

//I've also tried using axios as my http client as well.

任何意見或洞察，爲什麼這可能會發生以及如何解決這個問題？

來源

2017-01-20 Daniel Park