Level 75
Is javascript enabled.
Nov 16, 2018
6
Level 7
CSRF problem with mobile only!
Hi there,
I have a weird issue that I'm getting nowhere with. I have a Vue2/Laravel 5.7 SPA that works perfectly in development and production whether it's using Chrome, Firefox or Safari.
However when I go to the app on a smartphone, whether the phone browser is Chrome or Firefox, when I try to POST data, the TokenMismatchException is thrown.
My bootstrap.js looks like this:
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
window.axios.defaults.headers.common={
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
}
Again, in a desktop environment, everything runs perfectly - this just happens with a mobile browser.
Any ideas?
Level 7
Yes javascript is enabled.
Level 75
Is it an older mobile browser, as there has been issues.
Level 7
The browser (both FF and Chrome) are both up-to-date. I initially had this problem with Chrome, so part of my troubleshooting process was to install Firefox and see if the problem was just a Chrome issue or something larger.
Level 75
Since you are using Vue and axios, I'd start at there websites and look for any hints as why on mobile there is a problem. Usually just an added line of code can help.
Start with axios site, as this is usually the problem.
Level 53
Are you positive the token is being added to the post request? Out of the box, Laravel attached the token from the meta element in your html layout head to window.axios. If you imported axios in a vue component, then make sure you attach the token to the request. Just for testing, don't use the import of axios and use window.axios in its place to see if you get the same error.
Please or to participate in this conversation.