如何修复 XMLHttpRequest 中的 419 未知状态？答案

【问题标题】：How to fixed 419 unknown status in XMLHttpRequest?如何修复 XMLHttpRequest 中的 419 未知状态？
【发布时间】：2021-05-15 22:05:48
【问题描述】：

向我的网址发送发布请求时，我的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页面发送一个post请求以及参数并将其保存到db： https://www.test.com/storetrackvisit?gclid=312

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

这样它就会像这样保存到我的控制器中：

流量控制器

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（未知状态）？

【问题讨论】：

您需要发送 csrf 令牌_token:<token>，因为它受 Web 中间件保护
@KamleshPaul 如何调整我的代码？
添加 Csrf 令牌

标签： javascript laravel routes xmlhttprequest laravel-controller

【解决方案1】：

通常419 Error 表示请求中缺少CSRF 令牌。您可以通过两种方式轻松处理。

如果您不发送任何敏感信息，请将路由更改为 GET。
在您的请求中包含 CSRF 令牌。

我将解释第 2 点，如何在请求中包含 CSRF 令牌。

现在，还有两种方法可以包含 CSRF 令牌：

在标题中调用它。
创建一个包含令牌的 HTML 输入字段。

1.在标题中调用它

您可以像这样在标题中定义 CSRF 令牌，

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

然后在 JavaScript 中访问它并像这样为其设置标题，

xhr.setRequestHeader(header, value);

2。创建一个包含令牌的 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;

【讨论】：