AFS AFS - 6 months ago 957
Javascript Question

TokenMismatchException in VerifyCsrfToken.php line 67 on laravel using ajax

This view has a link which calls a javascript function

@extends('layouts.main')

@section('content')
<table class="table">
<tr>
<th>ID</th>
<th>Nombre</th>
<th>OpciĆ³n</th>
</tr>
@foreach ($tasks as $task)
<tr>
<td>{{$task->id}}</td>
<td>{{$task->name}}</td>
<td><a href="javascript:void(0)" onclick="eliminar({{$task->id}})" class="btn btn-danger">Eliminar</a></td>
</tr>
@endforeach
</table>
@stop


and here is the javascript code

function eliminar(id){
$.ajax({

type: "DELETE",
url: "task/"+id,
success: function (data) {
console.log(data);
},
error: function (data) {
alert('Error:', data);
}
});
}


and with the ajax call i want to call the destroy method of my controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Task;

class TaskController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$tasks = Task::all();
return view('mainview',['tasks' => $tasks]);
}

/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}

/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
}

/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}

/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}

/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}

/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
return "destroy";
}
}


But when I click the links I get this error :


TokenMismatchException in VerifyCsrfToken.php line 67


I'm new on Laravel but I thought that csrf was for forms.

Answer

You should add csrf_field to your main blade :

{{ csrf_field() }}

Then add _token to your request :

var _token = $('input[name="_token"]').val();

function eliminar(id){
  $.ajax({
    type: "DELETE",
    url: "task/"+id,
    data: { _token : _token },
    success: function (data) {
      console.log(data);
    },
    error: function (data) {
      alert('Error:', data);
    }
  });
}

Or you could add it one time in ajaxSetup and it will affect all calls to $.ajax or Ajax-based derivatives such as $.get() :

$.ajaxSetup(
{
    headers:
    {
        'X-CSRF-Token': $('input[name="_token"]').val()
    }
});

Take a look to CSRF Protection.

Hope this helps.