Use chrome dev tools and look on the network tab, for the ajax request, verify whether or not it's sending the X-CSRF-TOKEN header at all. That'd be the first step to track down the issue.
Nov 1, 2016
4
Level 6
Token mismatch vue resources
Hi! Im receiving a TokenMismatchException in VerifyCsrfToken.php line 68: when trying to perform a AJAX request with vue-resources. The odd is that the interceptor is there. Using Vue v2.0.3, Laravel 5.3.21, Vue resources ^1.0.3
dev-tools
vue-resource.common.js?2f13:1071 POST http://localhost:8000/posts 500 (Internal Server Error)
my form.vue
export default {
data() {
return {
body: null,
title: null
}
},
methods: {
post() {
this.$http.post('/posts', {
body: this.body,
title: this.title
}).then((response) => {
// success
this.body = null;
}, (response) => {
// error
console.log('error')
});
}
}
}
bootstrap.js
Vue.http.interceptors.push((request, next) => {
request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;
next();
});
Level 2
modify bootstrap.js setting csrf_token to that:
Vue.http.interceptors.push((request, next) => { request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
next();
});
look this: https://github.com/laravel/laravel/blob/master/resources/assets/js/bootstrap.js
1 like
Please or to participate in this conversation.