ajax POST請求的Laravel csrf令牌不匹配

Question

我正在嘗試通過 ajax 從數據庫中刪除數據。

HTML：

@foreach($a as $lis)
  //some code
  <a href="#" class="delteadd" id="{{$lis['id']}}">Delete</a>
  //click action perform on this link                  
@endforeach

我的ajax代碼：

$('body').on('click', '.delteadd', function (e) {
e.preventDefault();
//alert('am i here');
if (confirm('Are you sure you want to Delete Ad ?')) {
    var id = $(this).attr('id');
    $.ajax({
        method: "POST",
        url: "{{url()}}/delteadd",
        }).done(function( msg ) {
        if(msg.error == 0){
            //$('.sucess-status-update').html(msg.message);
            alert(msg.message);
        }else{
            alert(msg.message);
            //$('.error-favourite-message').html(msg.message);
        }
    });
} else {
    return false;
}
});

這是我從數據庫中獲取數據的查詢...

$a = Test::with('hitsCount')->where('userid', $id)->get()->toArray();

但是當我單擊刪除鏈接數據未刪除並顯示 csrf_token 不匹配時...

Answer 1

您必須在 ajax 請求中添加數據。 我希望它會起作用。

data: {
        "_token": "{{ csrf_token() }}",
        "id": id
        }

Answer 2

解決此問題“X-CSRF-TOKEN”的最佳方法是將以下代碼添加到您的主布局中，並繼續正常進行 ajax 調用：

在標題中

<meta name="csrf-token" content="{{ csrf_token() }}" />

在腳本中

<script type="text/javascript">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
</script>

Answer 3

我剛剛添加了headers:在 ajax 調用中：

  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

鑒於：

<div id = 'msg'>
     This message will be replaced using Ajax. Click the button to replace the message.
</div>

{!! Form::submit('Change', array('id' => 'ajax')) !!}

ajax函數：

<script>
 $(document).ready(function() {
    $(document).on('click', '#ajax', function () {
      $.ajax({
         type:'POST',
         url:'/ajax',
         headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
         success:function(data){
            $("#msg").html(data.msg);
         }
      });
    });
});
</script>

在控制器中：

public function call(){
    $msg = "This is a simple message.";
    return response()->json(array('msg'=> $msg), 200);
}

在 routes.php 中

Route::post('ajax', 'AjaxController@call');

拉拉維爾 8^

Route::post('ajax', [AjaxController::class, 'call']);

Answer 4

我認為最好將令牌放入表單中，並通過 id 獲取此令牌

<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

和 JQUEy ：

var data = {
        "_token": $('#token').val()
    };

這樣，您的 JS 就不需要在您的刀片文件中。

Answer 5

如果您使用的是模板文件，則可以將meta標記放在包含meta標記的頭部（或任何您命名的section ）中。

@section('head')
<meta name="csrf_token" content="{{ csrf_token() }}" />
@endsection

接下來，您需要將headers屬性放入您的ajax中（在我的示例中，我將數據datatable與服務器端處理一起使用：

"headers": {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')}

這是完整的數據表datatable示例：

$('#datatable_users').DataTable({
        "responsive": true,
        "serverSide": true,
        "processing": true,
        "paging": true,
        "searching": { "regex": true },
        "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
        "pageLength": 10,
        "ajax": {
            "type": "POST",
            "headers": {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
            "url": "/getUsers",
            "dataType": "json",
            "contentType": 'application/json; charset=utf-8',
            "data": function (data) {
                console.log(data);
            },
            "complete": function(response) {
                console.log(response);
           }
        }
    });

完成此操作后，您應該為您的ajax請求獲得200 status 。

Answer 6

向包含令牌的meta元素添加一個id

<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">

然后你可以在你的 Javascript 中得到它

$.ajax({
  url : "your_url",
  method:"post",
  data : {
    "_token": $('#csrf-token')[0].content  //pass the CSRF_TOKEN()
  },  
  ...
});

編輯：更簡單的方法，無需更改meta線。

data : { 
    _token: "{{ csrf_token() }}" 
}

或者

data : { 
    _token: @json(csrf_token()), 
}

感謝@martin-hartmann

Answer 7

知道有一個 X-XSRF-TOKEN cookie 是為了方便而設置的。 Angular等框架默認設置它。 在文檔https://laravel.com/docs/5.7/csrf#csrf-x-xsrf-token中檢查這個你可能喜歡使用它。

最好的方法是使用元，以防 cookie 被停用。

    var xsrfToken = decodeURIComponent(readCookie('XSRF-TOKEN'));
    if (xsrfToken) {
        $.ajaxSetup({
            headers: {
                'X-XSRF-TOKEN': xsrfToken
            }
        });
    } else console.error('....');

這里推薦的元方式（你可以以任何方式放置該字段，但元很安靜）：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});   

注意decodeURIComponent()的使用，它是從用於存儲 cookie 的 uri 格式解碼的。 [否則你會在 laravel 中得到一個無效的負載異常]。

這里有關文檔中的 csrf cookie 的部分要檢查： https ://laravel.com/docs/5.7/csrf#csrf-x-csrf-token

同樣在這里 laravel (bootstrap.js) 默認如何為 axios 設置它：

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
} 

你可以去檢查resources/js/bootstrap.js 。

在這里讀取cookie函數：

   function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
       }
        return null;
    }

Answer 8

你必須在主文件中包含這一行

<meta name="csrf-token" content="{{ csrf_token() }}" />

在調用 ajax 時，您必須實現 csrf token ，

$.ajax({
url:url,
data:{
 _token:"{{ csrf_token() }}"
},
success:function(result){
 //success message after the controller is done..
}
})

Answer 9

如果您使用 jQuery 發送 AJAX 帖子，請將此代碼添加到所有視圖：

$( document ).on( 'ajaxSend', addLaravelCSRF );

function addLaravelCSRF( event, jqxhr, settings ) {
    jqxhr.setRequestHeader( 'X-XSRF-TOKEN', getCookie( 'XSRF-TOKEN' ) );
}

function getCookie(name) {
    function escape(s) { return s.replace(/([.*+?\^${}()|\[\]\/\\])/g, '\\$1'); };
    var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)'));
    return match ? match[1] : null;
}

Laravel 為所有請求添加一個 XSRF cookie，我們會在提交之前自動將它附加到所有 AJAX 請求中。

如果有另一個函數或 jQuery 插件來做同樣的事情，你可以替換 getCookie 函數。

Answer 10

誰對接受的答案有問題@Deepak saini，請嘗試刪除

cache:false,
processData:false,
contentType:false,

用於ajax調用。

利用

dataType:"json",

Answer 11

如果您的會話過期，您可以使用它再次登錄

$(document).ajaxComplete(function(e, xhr, opt){
  if(xhr.status===419){
    if(xhr.responseJSON && xhr.responseJSON.message=='CSRF token mismatch.') window.location.reload();
  }
});

Answer 12

如果您正在使用 laravel 7.0 項目並遇到此錯誤

添加令牌作為要發送到控制器的參數的一部分將解決問題，就像上面給出的答案一樣。 這是 Laravel 保護您的站點免受跨站點攻擊的結果。 這要求您在每次提交表單時生成一個唯一令牌。

"_token": "{{ csrf_token() }}"

你現在可以擁有；

      const postFormData = {
            'name'     : $('input[name=name]').val(),
            "_token": "{{ csrf_token() }}"
        }; 
         
      $.ajax({
          url: 'pooling'
          , type: 'post'
          , data: postFormData
          , dataType: 'json'
          , success: function(response) { consolel.log(response) }
        });

Answer 13

您應該在表單中包含一個隱藏的 CSRF（跨站點請求偽造）令牌字段，以便CSRF 保護中間件可以驗證請求。

Laravel 為應用程序管理的每個活動用戶會話自動生成一個 CSRF “令牌”。 此令牌用於驗證經過身份驗證的用戶是實際向應用程序發出請求的用戶。

所以在做 ajax 請求時，你需要通過 data 參數傳遞csrf 令牌。

這是示例代碼。

var request = $.ajax({
    url : "http://localhost/some/action",
    method:"post",
    data : {"_token":"{{ csrf_token() }}"}  //pass the CSRF_TOKEN()
  });

Answer 14

xxxxxxx舊答案已刪除xxxxxxx

澄清/更新

元標頭中的 csrf 令牌用於會話管理

Laravel 為應用程序管理的每個活動用戶會話自動生成一個 CSRF “令牌”。

它與包含在以下內容中的值相同：

1. @csrf指令在表單中或 Blade 模板中的任何其他位置（這會生成_token隱藏輸入字段）。
2. csrf_token()全局輔助函數在控制器或刀片模板中的任何位置使用。

重要的

1. 對於尚未經過身份驗證的會話，CSRF 令牌為每個服務頁面重新生成/不同 - 即為每個加載的頁面生成新的會話數據。
2. 對於經過身份驗證的會話，CSRF 令牌對於所有頁面都是相同的 - 即會話數據在所有加載的頁面中保持不變。

結論

通過以下方式在 Ajax 請求中包含 CSRF 令牌：

1. 來自元標頭或生成的隱藏_token輸入字段 - 在使用表單發送 Ajax POST 請求時很有用：

<script> 
    $(document).ready(function() { 
        let token = $('meta[name="csrf_token"]').attr('content');
        // let token = $('form').find('input[name="_token"]').val(); // this will also work
        let myData = $('form').find('input[name="my_data"]').val();
        $('form').submit(function() { 
            $.ajax({ 
                type:'POST', 
                url:'/ajax', 
                data: {_token: token, my_data: myData}
                // other ajax settings
            }); 
            return false;
        }); 
    }); 
</script>

2. 在 Blade 模板的隱藏元素中調用csrf_token()並在 js 中獲取令牌 - 在發送沒有表單的 Ajax POST 請求時很有用：

刀：

<span id='csrf' style='display:none'>{{ csrf_token() }}<span>

JavaScript：

<script> 
    $(document).ready(function() { 
        let token = $('#csrf').html();
        $.ajax({ 
            type:'POST', 
            url:'/ajax', 
            data: {_token: token, my_data: 'john'}
            // other ajax settings
        }); 
    }); 
</script>

Answer 15

我只是在表單中使用 @csrf 並且它工作正常

Answer 16

我最近總是遇到這個錯誤。 確保在引用值時使用更具體的選擇器。 例如代替$('#firstname')使用$('form').find('#firstname');

Answer 17

拉拉維爾 5.8
在 ajax url 中使用 csrf（單獨的 js 文件）

$.ajax({
    url: "/addCart" + "?_token=" + productCSRF,
    type: "POST",
    ..
})

Answer 18

在新的 laravel 中，您只需要在任何地方執行此操作即可。 在 JS 或刀片文件中，您將擁有 csrf 令牌。

var csrf = document.querySelector('meta[name="csrf-token"]').content;

它是香草 JS。 對於 Ajax，您需要這樣做。

var csrf = document.querySelector('meta[name="csrf-token"]').content;
    $.ajax({
        url: 'my-own-url',
        type: "POST",
        data: { 'value': value, '_token': csrf },
        success: function (response) {
            console.log(response);
        }
    });

Answer 19

簡單地將csrfmiddlewaretoken: '{{ csrf_token }}'放入數據中效果很好！

$.ajax({
    url : "url where you want to send data"
    type : "POST", // http method
    data : {
      name:"...",
      csrfmiddlewaretoken: '{{ csrf_token }}' , #this works for me
    },

    // handle a successful response
    success : function(data){
      alert('......');
    },
    error : function() {
     ..............
    }

});

Answer 20

當您定義 $middlewareGroups 時，也可能存在這種情況

您應該使用以下格式：

protected $middlewareGroups = [
    'web'   => [],
    'api'   => [
        'web',
        'throttle:500,1'
    ],
    'basic' => [
        'auth:basic',
    ]
];

Answer 21

我與這個錯誤斗爭了幾天。 我嘗試了所有建議，但沒有任何效果。

然后這樣做時： php artisan cache:clear我收到一個非常奇怪的錯誤消息： Failed to clear cache. Make sure you have the appropriate permissions. Failed to clear cache. Make sure you have the appropriate permissions. 我必須手動刪除 /application/storage/framework/cache/data 目錄中的所有文件。 然后我設法清除了緩存。

然后 csrf 錯誤消失了。 我不知道為什么，但有一段時間我是一個快樂的人......

Answer 22

如果您將 laravel 從 5 升級到 8，並遇到此錯誤，請將以下內容添加到app/Http/Middleware/VerifyCsrfToken.php ：

public static function serialized()
{
    return true;
}

Answer 23

在刀片文件的腳本標記中，這樣做以生成有效的表單令牌並在 jQuery 中獲取它

<script>
    $(document).ready(function() {
        $("#my-upload-button").click(function() {

            var token = "{{ csrf_token() }}";//here getting token from blade

            $.post('my-url', {
                    _token: token,
                    datra: ...
                },
                function(data) {
                    alert(data); 
                });
        });         

});

Answer 24

我只是通過刪除processData: false為我解決了這個問題

$.ajax({
                url: '{{ route('login') }}' ,
                method: 'POST',
                data: {
                    _token : {{ csrf_token() }},
                    data : other_data,
                },
                cache: false,
                //processData: false, // remove this

                ...

                success: function(res){
                   ...
                }
});

Answer 25

在您的主頁 (someViewsName.blade.php) 中，聲明一個全局變量

<script>
    var token = "{{ csrf_token() }}";
</script>

<script src="/path/to/your_file.js"></script>

然后，在 your_file.js

$.ajax({
        type: "post",
        url: "http://your.url/end/point",
        data: {
                _token:token,
                data:your_data,
              },
        dataType: "json",
        success: function (response) {
            // code some stuff
        }
    });

Answer 26

我實際上有這個錯誤並且找不到解決方案。 我實際上最終沒有做一個ajax請求。 我不知道這個問題是由於這是我服務器上的子域還是什么。 這是我的jQuery。

            $('#deleteMeal').click(function(event) {
                var theId = $(event.currentTarget).attr("data-mealId");
                  $(function() {
                    $( "#filler" ).dialog({
                      resizable: false,
                      height:140,
                      modal: true,
                      buttons: {
                      "Are you sure you want to delete this Meal? Doing so will also delete this meal from other users Saved Meals.": function() {
                           $('#deleteMealLink').click();
//                         jQuery.ajax({
//                              url : 'http://www.mealog.com/mealtrist/meals/delete/' + theId,
//                              type : 'POST',
//                              success : function( response ) {
//                                  $("#container").replaceWith("<h1 style='color:red'>Your Meal Has Been Deleted</h1>");
//                              }
//                          });
                        // similar behavior as clicking on a link
                           window.location.href = 'http://www.mealog.com/mealtrist/meals/delete/' + theId;
                          $( this ).dialog( "close" );
                        },
                        Cancel: function() {
                          $( this ).dialog( "close" );
                        }
                      }
                    });
                  });
                });

所以我實際上設置了一個錨點來訪問我的 API，而不是做一個發布請求，這是我認為大多數應用程序所做的。

  <p><a href="http://<?php echo $domain; ?>/mealtrist/meals/delete/{{ $meal->id }}" id="deleteMealLink" data-mealId="{{$meal->id}}" ></a></p>