在Laravel使用Vue.js和Vue資源調用AJAX

我使用Vue.js和Vue資源在Laravel中進行AJAX請求。在Laravel使用Vue.js和Vue資源調用AJAX

我的看法：

{{Form::open(['method' => 'post', 'class' => 'form-inline', 'id' => 'main-form'])}} 
{{Form::text('param1', null, ['id' => 'param1', 'class' => 'form-control'])}} 
{{Form::text('param2', null, ['id' => 'param2', 'class' => 'form-control'])}} 
<input @click="sendIt($event)" type="submit" value="Check prices" class="btn btn-success btn-theme" /> 
{{Form::close()}}

我有JS：

var Vue = require('vue'); 
var VueResource = require('vue-resource'); 
Vue.use(VueResource); 
Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name=_token]').attr('content'); 
const app = new Vue({ 
el: '#app', 
methods: { 
sendIt: function (e) 
    { 
     e.preventDefault(); 
     var token = $('[name="_token"]').val(); 
     this.$http.post('/data').then((response) => { 
      console.log(response); 
     }, (response) => { 
      console.log(response); 
     }); 
    } 
}

路線：

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

和控制器：

public function data() 
{ 
    $msg = $this->test(); //method that retrieves data from db 
    return response()->json(['msg'=> $msg], 200); 
}

它給了我後置500內部服務器錯誤

對此我有這樣的標題：

Cache-Control 
Content-Type 
Date 
Phpdebugbar-Id 
Server 
Status 
Transfer-Encoding 
X-Powered-By

在網絡中我的數據的網站我有響應頭沒有道理，請求頭與令牌和我在請求令牌有效載荷。

如果我改變方法來獲得我有同樣的錯誤，但如果我改變方法來獲得，如果我從代碼我的控制器部分刪除，我從數據庫取回數據，只是傳遞字符串JSON（例如：

$msg = 'test'; 
return response()->json(['msg'=> $msg], 200);

我有成功，網頁上我可以輸出測試

所以我不知道，如果它的一些問題，令牌或別的東西我想這：。

var token = $('[name="_token"]').val(); 
this.$http.post('/prices', {_token:token})

但沒有。同樣的錯誤再次。

如果我補充一點：

http: { 
    headers: { 
    X-CSRF-TOKEN: document.querySelector('#token').getAttribute('content') 
    } 
},

我在頁面加載語法錯誤。

如果我改成這樣：

http: { 
    headers: { 
    Authorization: document.querySelector('#token').getAttribute('content') 
    } 
}

我再次得到了內部服務器錯誤。

這是我的主視圖令牌：

<meta name="csrf-token" id="token" content="{{ csrf_token() }}"> 

<script> 
    window.Laravel = <?php echo json_encode([ 
     'csrfToken' => csrf_token(), 
    ]); ?> 
</script>

編輯：

如果我添加圍繞x CSRF令牌，但仍我有令牌不匹配錯誤報價這部分工作。

http: { 
    headers: { 
     'X-CSRF-TOKEN': document.querySelector('#token').getAttribute('content') 
    } 
},

來源

2016-12-30 KondukterCRO

你檢查了你的日誌文件嗎？（'存儲/記錄/ laravel.log'）。我想可能會有相當數量的內容，因此您最好刪除該文件並再次嘗試請求，然後您應該瞭解有關錯誤的更多信息。或者，如果您轉到控制檯中的預覽選項卡，那麼錯誤也應該存在。 –

我清除了日誌文件，但沒有發生新的事情。但是在預覽中，我在VerifyCsrfToken.php第68行中得到了TokenMismatchException：所以它是關於令牌的。但是我發送了：| – KondukterCRO

你知道你使用的是什麼版本的Vue資源？ –

我可能是錯誤的，但在頂部的例子中，你有：

Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name=_token]').attr('content');

然而，在你的主視圖文件你有：

<meta name="csrf-token" id="token" content="{{ csrf_token() }}">

您應該能夠只需將$('meta[name=_token]')更改爲$('meta[name=csrf-token]')（讓它們匹配）。

此外，之所以出現語法錯誤X-CSRF-TOKEN: ...是因爲除非用引號括起來，例如'X-CSRF-TOKEN': ...，否則不能在鍵名中使用連字符。

希望這會有所幫助！

來源

2016-12-31 00:22:27

我改變了它，但又一次出現了相同的錯誤。發送相同的頭文件並顯示相同的令牌不匹配錯誤。但是現在，如果我在引號中設置帶有x-csrf的http標頭，則在頁面加載時不會出現錯誤。 – KondukterCRO

@KondukterCRO'window.Laravel.csrfToken'和請求頭中的令牌是否相同？ –

是的，他們是一樣的 – KondukterCRO

在Laravel使用Vue.js和Vue資源調用AJAX

回答

相關問題