如何修復 XMLHttpRequest 中的 419 未知狀態？

Question

向我的 url 發送發布請求時，我的XMLHttpRequest()出現錯誤。 當我檢查我的 console.log 它說

this line of code:
xhr.send();

Error: Failed to load resource: the server responded with a status of 419 (unknown status)

這是我僅使用純 javascript 的腳本代碼：

<!-- Get Parameters for gclid or token when user visits the website -->
<script>
    window.onload = function() {
        try {
            var url_string = (window.location.href).toLowerCase();
            var url = new URL(url_string);
            // Get Gclid
            var token = url.searchParams.get("gclid");
    
            // gclid expires in 6 hours
            document.cookie = `gclid=${gclid}; max-age=21600`;
    
            // Sending a get request to laravel controller
            var base_url = window.location.origin; // get the base url
            var params = "gclid=" + gclid;
    
            let xhr = new XMLHttpRequest();
            xhr.open("POST", base_url+"/storetrackvisit?"+params, true);
            xhr.send();
    
        } catch (err) {
            console.log("Issues with Parsing URL Parameter's - " + err);
        }
    }
    </script>

我正在嘗試在此XMLHttpRequest()中傳遞參數，以便當用戶具有此參數時。

示例： https://www.test.com/?gclid=312

它將向我的storetrackvisit頁面發送一個發布請求以及參數並將其保存到數據庫： https://www.test.com/storetrackvisit?gclid=312

            let xhr = new XMLHttpRequest();
            xhr.open("POST", base_url+"/storetrackvisit?"+params, true);
            xhr.send();

這樣它就會像這樣保存到我的 controller 中：

交通控制器

public function storeParams(Request $request)
{
    $traffic = new TrafficTracking();

    if ($request->has('gclid')) { // check if key = gclid
        $traffic->traffic_type = 'gclid'; // store the key in db
        $traffic->traffic_value = $request->gclid;
    }

    if ($traffic->value === null) {
        return response()->noContent();
    }

    $traffic->ip_address = $request->ip();
    $traffic->domain = $request->getHttpHost();
    $traffic->save();
}

web.php

// Traffic Controller
Route::post('/storetrackvisit', 'TrafficController@storeParams')->name('user.store.trackvisit');

我的xhr.send(); 返回狀態 419（未知狀態）？ 是因為在 javascript 中沒有與我的XMLHttpRequest一起傳遞的 csrf 令牌嗎？ 如果是這樣，我如何在XMLHttpRequest中傳遞它，或者可能是什么導致了 419（未知狀態）？

Answer 1

通常419 Error意味着請求中缺少CSRF令牌。 您可以通過兩種方式輕松處理它。

1. 如果您不發送任何敏感信息，請將路由更改為GET 。
2. 在您的請求中包含CSRF令牌。

我將解釋第 2 點，如何在請求中包含CSRF令牌。

現在，還有兩種方法可以包含CSRF令牌：

1. 在 header 中調用它。
2. 創建一個包含令牌的HTML輸入字段。

1.在標題中調用

您可以像這樣在 header 中定義CSRF令牌，

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

然后在 JavaScript 中訪問它並像這樣為其設置標題，

xhr.setRequestHeader(header, value);

2.創建一個包含token的HTML輸入字段

您可以像這樣創建一個包含令牌的輸入字段，

<!-- It's a laravel blade directive, which creates an input field containing token -->
@csrf

<!-- or manually do it -->
<input type="hidden" name="_token" value="{{ csrf_token() }}">

在您的 JavaScript 中獲取它並將其作為這樣的參數發送，

let csrfToken = document.getElementsByName("_token");
    
params += "&_token=" + csrfToken;