0

I have a route in api.php which I need to use 'web' middleware on to check for csrf verification because I don't want that route to be accessible from outside. I have read the following solutions:

Laravel “CSRF token mismatch” for POST with laravel-cors and axios

CSRF Token mismatch, laravel and axios

Laravel + Vue.js (axios) - CSRF token mismatch

https://laracasts.com/discuss/channels/laravel/csrf-token-mismatch-6

All of the say the same - have <meta name="csrf-token" content="{{ csrf_token() }}"> in the document header and be sure to add this token to axios header in bootstrap.js after including axios. Here's my bootstrap.js fragment

window.axios = require('axios');

window.axios.defaults.headers.common = {
  'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
  'X-Requested-With': 'XMLHttpRequest'
};

As you can see, everything seems to be setup correctly. I even tried assigning the token to axios header right before making the POST call but still the same issue persists - I keep getting "CSRF token mismatch". Any ideas what could be wrong?

EDIT: I have also tried appending "_token" with csrf token value in form body, still same issue.

Matrix
  • 437
  • 5
  • 18
  • Are you actually compiling and using the bootstrap file or you include axios in your blade template ? – Ion Mar 04 '21 at 13:24
  • I am using Vue.js for my front-end. And yes, I have "npm run watch" running so bootstrap.js is recompiled – Matrix Mar 04 '21 at 13:28
  • I use axios in a Laravel project and I don't need to set the "crsf" token in "window.axios.defaults.headers.common". This should happen automatically. Have you considered setting each "window.axios.defaults.headers.common" field separately? By passing an object there you might remove some other defaults. – Ion Mar 05 '21 at 13:57

0 Answers0