是什么導致此Laravel8應用程式中的“419未知狀態”錯誤？

我正在使用 Laravel 8 和 Bootstrap 5 制作博客應用程式。它有一個用戶組態檔管理系統。

我想讓每個用戶都可以添加和洗掉她/他的頭像。為此，我的控制器deleteavatar()中有一個方法：UserController

public function deleteavatar($id, $fileName)
{
  $current_user = Auth::user();
  $current_user->avatar = "default.png";
  $current_user->save();

  if (File::exists(public_path('images/avatars/' . $fileName))) {
    File::delete(public_path('images/avatars/' . $fileName));
  }
}

在路由檔案中：

Route::group(['prefix' => 'user'], function() {
    Route::get('/', [UserController::class, 'index'])->name('user');
    Route::match(['get', 'post'],'/update', [UserController::class, 'update'])->name('user.update');
    Route::post('/deleteavatar/{id}/{fileName}', [UserController::class, 'deleteavatar'])->name('user.deleteavatar');
});

我使用這段 JavaScript 來呼叫上面的方法：

function deleteAvatar(e) {
    e.preventDefault();

    var avatar = document.querySelector('#avatar-container img');
    var topAvatar = document.querySelector('#top_avatar');
    var trashIcon = e.currentTarget;
    var defaultAvatar = APP_URL   '/images/avatars/default.png';

    //Get user's ID
    var id = trashIcon.dataset.uid;
    var fileName = avatar.getAttribute('src').split('/').reverse()[0];

    var url = APP_URL   `/dashboard/user/deleteavatar/${id}/${fileName}`;

    if (confirm('Delete the avatar?')) {
      var CSRF_TOKEN = document.querySelectorAll('meta[name="csrf-token"]')[0].getAttribute('content');

      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
          if (xmlhttp.status == 200) {
              avatar.setAttribute('src', defaultAvatar);
              topAvatar.setAttribute('src', defaultAvatar);
              trashIcon.remove();
          }
        }
      }

      xmlhttp.open('POST', url, true);
      xmlhttp.send();
    }
}
document.querySelector('#delete-avatar').addEventListener('click', deleteAvatar);

問題

由于我一直無法找到的原因，Chrome 控制臺會拋出 this 419 (unknown status)。

我的錯誤是什么？

uj5u.com熱心網友回復：

為 csrf 令牌設定 xmlhttp 標頭

function deleteAvatar(e) {
    e.preventDefault();

    var avatar = document.querySelector('#avatar-container img');
    var topAvatar = document.querySelector('#top_avatar');
    var trashIcon = e.currentTarget;
    var defaultAvatar = APP_URL   '/images/avatars/default.png';

    //Get user's ID
    var id = trashIcon.dataset.uid;
    var fileName = avatar.getAttribute('src').split('/').reverse()[0];

    var url = APP_URL   `/dashboard/user/deleteavatar/${id}/${fileName}`;

    if (confirm('Delete the avatar?')) {
        var CSRF_TOKEN = document.querySelectorAll('meta[name="csrf-token"]')[0].getAttribute('content');

        var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
                if (xmlhttp.status == 200) {
                        avatar.setAttribute('src', defaultAvatar);
                        topAvatar.setAttribute('src', defaultAvatar);
                        trashIcon.remove();
                }
            }
        }

        xmlhttp.open('POST', url, true);
        xmlhttp.setRequestHeader("X-CSRF-TOKEN", CSRF_TOKEN);
        xmlhttp.send();
    }
}
document.querySelector('#delete-avatar').addEventListener('click', deleteAvatar);

參考：https ://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader

參考：https ://laravel.com/docs/9.x/csrf

uj5u.com熱心網友回復：

由于缺少 csrf 令牌，Laravel 回傳 http 狀態 419。在 HTML 標記中添加 csrf 令牌meta并添加到您的 ajax 請求標頭中。

供參考：https ://laravel.com/docs/8.x/csrf#csrf-x-csrf-token

標籤：javascript 阿贾克斯 拉拉维尔 laravel-8

上一篇：單擊Javascript中的復選框時如何更改選中/取消選中串列框

下一篇：在同一頁面上使用Ajax和PHP，一次又一次地附加整頁內容