使用ajax在laravel上的VerifyCsrfToken.php第67行中的TokenMismatchException

Question

該視圖有一個調用javascript函數的鏈接

@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

這是javascript代碼

function eliminar(id){
  $.ajax({

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

並使用ajax調用我想調用我的控制器的destroy方法

<?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";
    }
}

但是，當我點擊鏈接時，我收到此錯誤：

VerifyCsrfToken.php第67行中的TokenMismatchException

我是Laravel的新手，但我認為csrf適用於表格。

Answer 1

您應該將csrf_field添加到主刀片：

{{ csrf_field() }}

然后將_token添加到您的請求中：

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);
    }
  });
}

或者您可以在ajaxSetup添加一次，它將影響對$.ajax或基於Ajax的衍生產品（如$.get()所有調用：

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

看看CSRF保護 。

希望這可以幫助。

Answer 2

這對我有用。 我在網上找到了幾個答案，但沒有一個單獨起作用; 然而，在結合所有之后，我得到了Ajax調用。

1. 在視圖文件的頭部，添加以下行：

    <meta name="csrf-token" content="<?php echo csrf_token() ?>"> // This will retrieve the necessary token. 

2. 然后，檢索令牌的值並將其放在變量上（可選步驟）：

    var currentToken = $('meta[name="csrf-token"]').attr('content'); 

3. 在您的ajax調用中，在'data：'字段中包含令牌的值：

    $.ajax({type: 'POST', data: {_token:currentToken},....}); 

您可以避免在'data：'字段上為其創建新變量的可選步驟; 但是，我發現這一步更容易理解。

希望這可以幫助。

Answer 3

傳遞'DELETE'方法時，需要添加標記輸入字段。

HTML：

<input class="token" value="{{ csrf_field() }}"/>

碼：

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

您還可以通過將其添加到中間件中的except數組來從驗證過程中刪除該路由。