Laravel 8.x 419 &quot;CSRF token mismatch&quot;

Level 70

@pn Alternatively you can pass token in the header-

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

Check more: https://laravel.com/docs/8.x/csrf#csrf-x-csrf-token

Level 2

@tisuchi thanks for replying, but I still get same error after applying your solution.

tisuchi

Level 70

@pn Have you checked in the source code in HTML, what exactly you are getting once you prince it?

<meta name="csrf-token" content="<?php echo csrf_token(); ?>

Level 27

@pn

// you must call this early before the AJAX takes place.
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
    }
});

If it still does not work, please show your rendered HTML with the AJAX JavaScript code.

Snapey

Level 122

<meta name="csrf-token" content="<?php echo csrf_token(); ?>

is missing a closing " >

1 like

Level 27

@snapey sharp eyes!

Level 2

@snapey thanks for pointing that out, but that did not work. My frontend stopped working.

Here is the corrected code :

<meta name="csrf-token" content="<?php echo csrf_token(); ?>">

And here is what I get in the 'View Page Source'

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="

With last line in red color.

Here is the javascript code :

<script type="text/javascript">
    	let token;
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
    </script>

Here is the ajax call :

	$.ajax({
		beforeSend: function (xhr) {
			xhr.setRequestHeader ("Accept", "application/json");
	    	},
	    	url: 'http://localhost/myDomain/public/api/register',
	    	type: "POST",
	    	dataType: "JSON",
	    	data: data,
	    	success: function(reponseData, textStatus, jqXHR){
	    		let data = $.parseJSON(responseData);
	    		token = data.token;
	    			console.log(responseData);
	    			console.log(data);
	    	},
	    	error: function(jqXHR, reponseData, errorThrown){
	    		console.log(errorThrown);
	    	},
	    	complete: function(jqXHR, data){
	    		console.log(data);
	    	},
	 });

Level 27

@pn this is purely to move you forward, I would try {{ csrf_token() }} and move towards the $('meta[name="csrf-token"]').attr('content') only after it works.

	<meta name="csrf-token" content="{{ csrf_token() }}">
	...
	$.ajax({
		headers: {
			'X-CSRF-TOKEN': '{{ csrf_token() }}'
		},
		beforeSend: function (xhr) {
			xhr.setRequestHeader ("Accept", "application/json");
	    	},
	    	url: 'http://localhost/myDomain/public/api/register',
	    	type: "POST",
	    	dataType: "JSON",
	    	data: data,
	    	success: function(reponseData, textStatus, jqXHR){
	    		let data = $.parseJSON(responseData);
	    		token = data.token;
	    			console.log(responseData);
	    			console.log(data);
	    	},
	    	error: function(jqXHR, reponseData, errorThrown){
	    		console.log(errorThrown);
	    	},
	    	complete: function(jqXHR, data){
	    		console.log(data);
	    	},
	 });

Level 75

On fronted you don't use Laravel? If so you don't have csrf_token() in pure php.

Level 2

@michaloravec I get CSRF Token Mismatch(419) so I think I need to include csrf token.

Level 2

@laracoft I tried that already earlier but because it did not work so, I just gave it a try.

Level 27

@pn let's back up a bit.

Are you using view() and blade from Laravel? From your opening post, it's no
csrf_token() only works if you use view() from Laravel
Consider using a blade view, then all the earlier suggestions will work

https://laravel.com/docs/8.x/routing#basic-routing

Level 75

You should use routes/api.php for your api laravel app instead of routes/web.php.

Because routes/api.php don't use web middleware group. And in that group is \App\Http\Middleware\VerifyCsrfToken::class

1 like

Level 2

@laracoft I use Laravel only for api purpose and I have to build frontend without Laravel.

Level 2

@michaloravec I am using api.php (url in ajax call contains the api).

Level 27

@pn there should not be a public in your URL

Level 75

Remove csrf from your frontend.

jlrdw

https://shiflett.org/articles/cross-site-request-forgeries

Level 75

Then you probably need to create your own token and compare it. Here is an older article but a good one.

You need to thoroughly understand how csrf works.

Or go with completely token-based.

Level 27

@pn Are you pointing your folder correctly? Your URL should not contain public

It should be just http://localhost/api/register or at most http://localhost/myDomain/api/register, but what you have now is http://localhost/myDomain/public/api/register

When pointed correctly, your /api/register will never get 419 error. 419 is strictly from CSRF issues which does not exists in /api/*

\Laravel    <- DocumentRoot of domain must not point here
├── app
├── public  <- DocumentRoot of domain must point here
├── vendor
...
└── storage

Level 75

For development everytime use virtual host on localhost.

Level 2

@laracoft currently I have not configured it to remove public, so I am using it with public.

Level 2

@michaloravec what are the benefits of using a virtual host ? Do you have any article or blog post that can teach me that ?

Level 27

@pn Laravel does not throw 419 when using /api/, something deep in your project has changed.

http://localhost/myDomain/public/api/register

Level 75

For example instead of

you will have

http://www.example.com/api/register

It depends what do you use, wamp, xampp. Or you have mac, windows etc.

Level 2

@laracoft I tried by removing public from the url but that it gives me 404 Also, in my api I have not changed anything of the core files and also it works with postman fine.