title: TokenMismatch Error on Ajax Requests in Laravel
body: <p>I am getting <code>TokenMismatch</code> Error on Ajax Submit when I submit form it gives me error. Here I am using <code>Laravel 5.2</code>. Where I am passing <code>X-CSRF-TOKEN</code> on ajax call. Set Token on on meta on <code>default.blade.php</code>. I've tried all possible solutions from <code>StackOverflow</code>.</p>
  
  <ol>
  <li>Changing permission of storage folder. </li>
  <li>Tried clearing cache.</li>
  <li>Try adding <code>Route::group(['middleware' =&gt; ['web','auth']], function () {</code></li>
  <li>Adding <code>token</code> to header of ajax function.</li>
  <li>Tried adding <code>token</code> field inside form.</li>
  </ol>
  
  <p>Can anyone find any solution from below code.</p>
  
  <p>Any idea where I'm going wrong? Any help will be appreciated</p>
  
  <p>Below is my Category HTML Form <code>category.blade.php</code>:</p>
  
  <pre><code>&lt;form method="POST" name="category-add-form" id="category-add-form" action="{{route("category-add")}}" accept-charset="UTF-8"&gt;
      {{csrf_field()}}
      &lt;div class="form-group"&gt;
          &lt;label for="title"&gt;Category Title:&lt;/label&gt;
          &lt;input class="form-control" name="category_title" type="text" value="" id="category_title"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="body"&gt;Description:&lt;/label&gt;
          &lt;textarea class="form-control" name="category_description" cols="50" rows="10" id="category_description"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;input class="btn btn-primary form-control" type="submit" value="Add CAtegory"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Below id my <code>app.js</code>.</p>
  
  <pre><code>$.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });
  </code></pre>
  
  <p>Below is my <code>category-add.js</code> here is my ajax code. I've not included whole function.</p>
  
  <pre><code>var request;
  var $inputs = $("#category-add").find("input, select, button, textarea");
  var formData = new FormData($("#category-add")[0]);
  request = $.ajax({
      url: $("#category-add").attr("action"),
      type: "POST",
      data: formData,
      processData: false,
      contentType: false,
      dataType: "json",
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });
  
  request.done(function (response, textStatus, jqXHR) {
      //Notification.init(response.message);
      //App.unblockUI('.block-panel-box');
  });
  request.error(function (response, textStatus, jqXHR) {
      //App.unblockUI('.block-panel-box');
  });
  request.always(function () {
      $inputs.prop("disabled", false);
  });
  </code></pre>
  
  <p>Below is my <code>default.blade.php</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;title&gt;Test Project&lt;/title&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta content="width=device-width, initial-scale=1" name="viewport" /&gt;
          &lt;meta name="csrf-token" content="{{csrf_token()}}"&gt;
          &lt;link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&amp;subset=all" rel="stylesheet" type="text/css" /&gt;
          &lt;link href="{{asset("public/css/font-awesome.min.css")}}" rel="stylesheet" type="text/css" /&gt;
          &lt;link href="{{asset("public/css/simple-line-icons.min.css")}}" rel="stylesheet" type="text/css" /&gt;
          &lt;link href="{{asset("public/css/bootstrap.min.css")}}" rel="stylesheet" type="text/css" /&gt;
          &lt;link href="{{asset("public/css/components-md.min.css")}}" rel="stylesheet" id="style_components" type="text/css" /&gt;
          &lt;link href="{{asset("public/css/plugins-md.min.css")}}" rel="stylesheet" type="text/css" /&gt;
          &lt;link href="{{asset("public/css/layout.min.css")}}" rel="stylesheet" type="text/css" /&gt;
          &lt;link href="{{asset("public/css/blue.min.css")}}" rel="stylesheet" type="text/css" id="style_color" /&gt;
          &lt;link href="{{asset("public/css/responsive.css")}}" rel="stylesheet" type="text/css" /&gt;
          &lt;link rel="shortcut icon" href="favicon.ico" /&gt;
      &lt;/head&gt;
      &lt;body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-sidebar-closed page-md"&gt;
          @include('user.layout.header')
          &lt;div class="clearfix"&gt; &lt;/div&gt;
          &lt;div class="page-container"&gt;
              @include('user.layout.sidebar')
              &lt;div class="page-content-wrapper"&gt;
                  @yield('content')
              &lt;/div&gt;
          &lt;/div&gt;
          @include('user.layout.footer')
          &lt;div class="quick-nav-overlay"&gt;&lt;/div&gt;
          &lt;script src="{{asset("public/js/jquery.min.js")}}" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="{{asset("public/js/bootstrap.min.js")}}" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="{{asset("public/js/jquery.slimscroll.min.js")}}" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="{{asset("public/js/app.min.js")}}" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="{{asset("public/js/category-add.js")}}" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Below is my category route file <code>route.php</code></p>
  
  <pre><code>Route::group(['middleware' =&gt; ['web','auth']], function () {
      Route::post('/category-add', array("as" =&gt; "category-add","uses" =&gt; "CategoryController@store"));
  });
  </code></pre>
  
  <p>Below is my <code>CategoryController.php</code></p>
  
  <pre><code>class CategoryController extends Controller {
      public function store(Request $request) {
          $inputs = $request-&gt;all();
          $category = Category::create($inputs);
          if($category){
              $responseArray = array("status"=&gt;true,"message"=&gt;"Category successfully created");
          } else {
              $responseArray = array("status"=&gt;false,"message"=&gt;"Could not add category please try again later");
          }
          return response()-&gt;json($responseArray);
      }
  }
  </code></pre>
  
  <p>Below is my <code>.env</code> file</p>
  
  <pre><code>APP_ENV=local
  APP_DEBUG=true
  APP_KEY=base64:ratSluNv930gb3wp1UOabW6Ze3jEJn3ixtTX/wgqYZc=
  APP_URL=http://project.dev/ts/cart-products
  
  DB_CONNECTION=mysql
  DB_HOST=127.0.0.1
  DB_PORT=3306
  DB_DATABASE=cart-products
  DB_USERNAME=hellocart
  DB_PASSWORD=j@yshre33r@m
  
  CACHE_DRIVER=file
  SESSION_DRIVER=file
  QUEUE_DRIVER=sync
  </code></pre>
  
  <p>Below is my <code>config/session.php</code> file</p>
  
  <pre><code>return [
      'driver' =&gt; env('SESSION_DRIVER', 'file'),
      'lifetime' =&gt; 120,
      'expire_on_close' =&gt; false,
      'encrypt' =&gt; false,
      'files' =&gt; storage_path('framework/sessions'),
      'connection' =&gt; null,
      'table' =&gt; 'sessions',
      'lottery' =&gt; [2, 100],
      'cookie' =&gt; 'cart-products',
      'path' =&gt; '/ts/cart-products', //Change path variable URL form '/cart-products' to '/ts/cart-products'
      'domain' =&gt; null,
      'secure' =&gt; false,
      'http_only' =&gt; true,
  ];
  </code></pre>
  
  <p>Below is my <code>Kernal.php</code></p>
  
  <pre><code>protected $middlewareGroups = [
      'web' =&gt; [
          \App\Http\Middleware\EncryptCookies::class,
          \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
          \Illuminate\Session\Middleware\StartSession::class,
          \Illuminate\View\Middleware\ShareErrorsFromSession::class,
          \App\Http\Middleware\VerifyCsrfToken::class,
      ],
  
      'api' =&gt; [
          'throttle:60,1',
      ],
  ];
  </code></pre>