Level 67
You mentioned using Vue... are you using ajax or something when this happens? If so, did you set the token in the ajax headers?
Mar 7, 2018
7
Level 3
Can't read csrf token from meta tag
I am using VueJS and Laravel, and in console it shows CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token, but I added it in head in meta tag
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Vicoteka</title>
<link rel="icon" href="{{ url('images/logo.png') }}">
<link href="https://fonts.googleapis.com/css?family=Arimo|Lobster" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
</head>
<body class="bg-grey-lighter leading-normal">
<div id="app">
@yield('content')
@include('components/footer')
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Am I missing something? I didn't change anything in app.js, and it worked when there was no @yield and @include, but it doesn't work now even when i comment it out
Level 3
I am using axios library, it should automatically set the token. In bootstrap.js is code
indow.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
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');
}
Level 67
After you commented it out, did you artisan view:clear? Do you get any js errors in console?
Level 3
Yes, but that didn't help. But after some time, with no reason at all, it started working again. Weird
Level 1
if you tried
let token = document.head.querySelector('meta[name="csrf-token"]');
in the browser console in the page you try in, you will not get token just edit this line in bootstrap.js file to be:
let token = document.querySelector('meta[name="csrf-token"]');
for some reason I do not know yet document.head.querySelector('meta[name="csrf-token"]'); returns null while it is in DOM
this works for me!
1 like
Level 1
a simple hack is to do it like this
in your master page or somewhere else which is public to all document. but better place is master page add this
<script>
$csrfToken={{csrf_token()}}
</script>
//then in all java scripts or ajax or jquery request any client scripting you wanted that token just take it like this.
var token = csrfToken;
Level 1
This literally started happening to me today, out of the blue, on the same project I've been working on for months. I have no idea what I changed. However swapping from: document.head.querySelector("[name=csrf-token]").content to document.querySelector("meta[name=csrf-token]").content ...worked. I'm confused.
Please or to participate in this conversation.