I am currently working on two projects that have the same Laravel base code, but one project has a more advanced Vue.js part. Recently, I encountered a strange error message in the JavaScript console.
CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token
In an attempt to troubleshoot, I copied the older version of the functional Vue code from the advanced project, only to face the same error. Interestingly, the copied code worked perfectly in the other project.
Both projects share the same bootstrap code which is as follows:
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
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');
}
To further investigate, I added a test in the bootstrap.js code like this:
console.log(token);
However, the result came out empty.
At this point, I am at a loss on what steps to take next. Any suggestions?