CSRF token mismatch in Laravel / Angular app

Question

In an app which mixes Laravel and Angular, I have this persistent CSRF token mismatch error coming up when calling a route from an Angular service. This is more or less how it's set up:

ROUTES

Route::group(['middleware' => ['web'] ], function () { // non-auth routes (e.g. signup, login) ... Route::group(['middleware' => 'auth'], function() { Route::get('w/{ignore?}', function () { return view('writer.index');}) ->where('ignore', '.*'); Route::match(['get', 'post'], 'doc/open', 'Controller@openItem'); }); });

The writer.index view shows up fine without token error (the user has been authenticated).

The VIEW includes:

<meta name="csrf-token" content="{{ csrf_token() }}" />

and

<script> $(function(){ $.ajaxPrefilter(function(options, originalOptions, xhr) { var token = $('meta[name="csrf-token"]').attr('content'); if (token) { return xhr.setRequestHeader('X-CSRF-TOKEN', token); } }); }); </script>

From Angular, a service is producing a request to the doc/open route over $http.post which returns the token mismatch error.

I checked the headers and the $http.post did in fact send over a value for X-XSRF-TOKEN. However, this header value does not match the XSRF-TOKEN value in the cookie. If that's the mismatch, why is it occurring?

You dont need to setup for angular, because it already sends x-xsrf that is recieved from Laravel - laravel.com/docs/5.2/routing#csrf-x-xsrf-token — naneri
– naneri, Commented Aug 10, 2016 at 18:01
@naneri thanks. but if I remove it, I still get the error though. — greener
– greener, Commented Aug 10, 2016 at 18:05
could you check in dev tools does angular send any headers during AJAX calls? By the way which versions of Angular are you using? — naneri
– naneri, Commented Aug 10, 2016 at 18:06
@naneri Angular v1.2.12 and it's sending X-XSRF-TOKEN and cookie (which includes XRSF-TOKEN, and is different from X-XSRF-TOKEN) — greener
– greener, Commented Aug 10, 2016 at 18:11

Rohan Krishna · Accepted Answer · 2016-10-03 09:08:27Z

In laravel 5.3, this is made simple with Passport package. I was having the same trouble with Angular resource requests. I fixed it by installing Passport via composer and adding the following lines to

app\Http\Kernel.php

 protected $middlewareGroups = [ 'web' => [ \stix\Http\Middleware\EncryptCookies::class, \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class, \Illuminate\Session\Middleware\StartSession::class, \Illuminate\View\Middleware\ShareErrorsFromSession::class, \stix\Http\Middleware\VerifyCsrfToken::class, \Illuminate\Routing\Middleware\SubstituteBindings::class, \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class, ],

Now laravel will automatically include X-CRSF-TOKEN for every request made within the web middleware group. Hope this helps.

Collectives™ on Stack Overflow

CSRF token mismatch in Laravel / Angular app

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related