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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related