Я пытаюсь получить часть приложения Auth, которую я создаю. Я использую 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_dumping из всей информации запроса $, которая передается в этот класс '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-ресурсом, который я использую. Возможно, я что-то делаю неправильно, но я просмотрел видео в google posts/stackoverflow/youtube по этой проблеме, но ничего не исправила ошибку. Я проделал обходной путь, когда я заставляю файл cookie XSRF-TOKEN сравниваться с токеном, но это заставляет задуматься о проблемах безопасности и о том, что происходит, когда пользователь случайно или неосознанно удаляет свои файлы 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.
Любые советы или сведения о том, почему это может произойти и как решить эту проблему?