Laravel 5 AJAX TokenMismatchException

Your approach is correct regarding the docs [ http://laravel.com/docs/5.0/routing#csrf-protection ]. One thing that crossed my mind is that maybe the $.ajaxSetup(...) is running after some of the requests are sent. Be sure to setup it before any app logic related script runs.

I mean:

    <script src="//code.jquery.com/jquery.min.js"></script>
    <script src="js/config.js"></script> <!-- Do your $.ajaxSetup in this file -->
    <script src="js/app.js"></script>

Also in your js files don't forget to wrap your code in a $(function () {...}); or in a $(document).ready(function () {...}) which have the same effect. This will assure that any jQuery script will run only after the DOM content is loaded, like so:

// public/js/config.js
$(function () {
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
    });
});

If you are building your scripts with elixir, be sure to have your configuration code before your app code.

Attempted it, didn't make a difference. I'm gonna keep it like that anyway because its more correct. Could be be anything to do with the fact that i'm developing on localhost?

Speaking of elixir, are there ways to have different configurations for different pages?

Did you check the request headers in chrome/firefox dev tools to see if the header is being correctly set?

You could compile different scripts with elixir:

// ./gulpfile.js

elixir(function ( mix ) {
    mix.scripts([
        'vendor/bower_components/jquery/dist/jquery.min.js',
        'resources/assets/js/home/config.js',
        'resources/assets/js/home/app.js'
    ], 'public/js/home', './' );

    mix.scripts([
        'vendor/bower_components/jquery/dist/jquery.min.js',
        'resources/assets/js/other-page/config.js',
        'resources/assets/js/other-page/app.js'
    ], 'public/js/other-page', './' );
});

And then in your home use it like this:

<script src="{{ asset( 'js/home/all.js' ) }}"></script>

And then in your other-page use it like this:

<script src="{{ asset( 'js/other-page/all.js' ) }}"></script>

Regarding the token, try this:

    $.ajaxPrefilter(function(options, originalOptions, xhr) { // this will run before each request
        var token = $('meta[name="csrf-token"]').attr('content'); // or _token, whichever you are using

        if (token) {
            return xhr.setRequestHeader('X-CSRF-TOKEN', token); // adds directly to the XmlHttpRequest Object
        }
    });

Thanks! Is that a replacement for ajaxSetup?

Not actually, ajaxPrefilter will run before each request while ajaxSetup should set global configurations once.

But as you have described that sometimes the ajaxSetup is failing, give it a try.

@rappasoft I think you make have older version of L5. X-CSRF-Token was not available in 5.0.0, it was added somewhere along the way. Try running composer update laravel/framework.

I had an issue on a different framework (cake I believe) where I was sending in a bunch of ajax requests at once and some were failing. It was random on when they would succeed and fail. I believe we increased the number of allowed connections that apache would receive at once, and that seemed to fix the problem. (It's been a minute, so I think that's the solution we came up with.)

Anyway, it may not be framework or javascript related - check your server configs too! Hope that helps.

I just moved from L4 to L5 and this was giving fits. Till I got migrated I just disabled it in the framework.

<?php namespace Illuminate\Foundation\Http\Middleware;

use Closure;
use Illuminate\Contracts\Routing\Middleware;
use Symfony\Component\HttpFoundation\Cookie;
use Illuminate\Contracts\Encryption\Encrypter;
use Illuminate\Session\TokenMismatchException;
use Symfony\Component\Security\Core\Util\StringUtils;

class VerifyCsrfToken implements Middleware {

And then ion the function, I just returned true. Until I migrated the guts of my L4 code. And verified it worked.

/**
     * Determine if the session and input CSRF tokens match.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return bool
     */
    protected function tokensMatch($request)
    {
        $token = $request->input('_token') ?: $request->header('X-CSRF-TOKEN');

        if ( ! $token && $header = $request->header('X-XSRF-TOKEN'))
        {
            $token = $this->encrypter->decrypt($header);
        }

        return true;
        //return StringUtils::equals($request->session()->token(), $token);
    }

Not elegant, but I wanted to get stuff moved. I have since seen removing this from middleware stack as well. Anyway if you want to validate your update code.

Once I got stuff migrated I went back to look at csrf issues.

I started by putting the token in my webpage view and picking it up in the constructor of my AJAX sender.

<!doctype html>
<html>
<head>
    <title>Manage Contact Types</title>
    <link rel="stylesheet" href="/assets/css/main.css">
    <link rel="stylesheet" href="/assets/css/alertify.css" />
    <link rel="stylesheet" href="/assets/css/themes/default.css" />
    <meta name="csrf-token" content="<?php echo csrf_token() ?>"/>
</head>

And then...

function PayloadMsg() {
    this.onPayload = function(){};
    this.onMsg = function(){};
    this.onErr =  function(){};
    this.onDef =  function(){};

    this.payLoad = "";
    this.async = true;
    this.busy = false;
    this.timeout = 60000;
    this.url_check_timeout = 10;    // should be higher over the web.

    this.urlOk = false;
    this.context = null;    // optional context object passed by user via call method.
    this.lastError = NetError.ok;

    //this.csrf_token = $('meta[name="csrf-token"]').attr('content');
    this.csrf_token = "";
    this.getToken();
    fyi("First Token [" + this.csrf_token + "]");

The Jquery call to get the token from header is commented out because I now make a get call to get the token from the server. I too noticed the token did not change all the time. And when I just let the webpage sit idle in the browser, eventually my token expires. Luckily when I post I first ping my router commands. When the fail I ask for a new token.

Post Call

PayloadMsg.prototype.call = function(url, callData, context) {
    this.urlExists(url, this.exists);

    if (this.urlOk == false || url == ""  || arguments.length == 0) {
        fyi("Bad URL [" + url + "]");
        this.getToken();
        return;
    }

This works good as I can recover from stale tokens. Its bad because anyone can make the get token call. I am considering mem cache and XORing the token. Or dropping the Session in mem cache. Any ideas or wisdom would be most welcome.

When I make the call I always add the current token.

   // make sure if callData is an object we make it an empty object.
    // we do this so we can add _token to it.

    if (callData == "") {
        callData = {};
    }
    this.busy = true;
    callData['_token'] = this.csrf_token;
    fyi('Post token [' + callData['_token'] + ']');
    $.myPost(url, callData, this, this.handlePost, this.postError, this.timeout, this.async);
}

The Get token exchange.

PayloadMsg.prototype.getToken = function () {
    $.ajax({
        type: 'GET',
        url: 'token',
        async: false,
        context: this,
        data: "",
        timeout: this.url_check_timeout,
        success: function (token) {
            this.csrf_token = token;
            fyi("Got new Token...[" + token + "]");
        }.bind(this),
        error: function () {
            this.lastError = NetError.invalidURL;
        }.bind(this)
    });
};

Route...

\Route::get('token', function () {
       return csrf_token();
   });

@jimmck are you still using this approach?

@rappasoft what was the final solution for your problem?

The solution is adding domain parameter to session.php in the config

in .env DOMAIN=yourdomain.com and in config/session.php add

'domain' => env('DOMAIN', 'localhost'),

@Vigikaran this didn't worked for me...