419 未知状态 ajax laravel - JavaScript

在使用 Laravel 时经常会遇到 419 未知状态的问题，这通常是因为在使用 AJAX 发送请求时没有正确处理 CSRF 令牌。本文将介绍如何在 Laravel 中处理 CSRF 令牌并解决这个问题。

CSRF 令牌

CSRF，全称为 Cross-Site Request Forgery，中文名称为跨站请求伪造。它是一种常见的攻击方式，攻击者利用用户登录的状态，在用户不知情的情况下伪造请求，进行恶意操作。

为了防止 CSRF 攻击，Laravel 引入了 CSRF 令牌机制。每次请求都需要携带一个 CSRF 令牌，服务器会校验请求中的令牌是否合法。如果不合法，将返回 419 状态码。

如何在 Laravel 中处理 CSRF 令牌

在 Laravel 中使用 AJAX 发送请求，需要在请求头中添加 X-CSRF-TOKEN 字段，并将其值设置为当前页面的 CSRF 令牌。大多数情况下，在 Laravel 应用中使用 @csrf 指令可自动生成正确的 CSRF 令牌。需要注意的是，这个指令必须包含在表单标签内部。

<form action="/submit-form" method="post">
    @csrf
    <input type="text" name="name">
    <button type="submit">提交</button>
</form>

如果您正在使用 JavaScript 发送 AJAX 请求，可以使用以下代码获取当前页面的 CSRF 令牌：

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

// 使用 jQuery
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': csrf
    }
});

// 使用原生 JavaScript
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit-form');
xhr.setRequestHeader('X-CSRF-TOKEN', csrf);
xhr.send();

解决 419 未知状态问题

如果没有正确处理 CSRF 令牌，您将会收到一个 419 未知状态的响应。如果您正在使用 jQuery，可以使用以下代码将错误转向登录页面：

$(document).ajaxError(function (event, xhr, options) {
    if (xhr.status === 419) {
        window.location.href = '/login';
    }
});

如果您正在使用原生 JavaScript，可以使用以下代码：

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理响应结果
    }

    if (xhr.readyState === 4 && xhr.status === 419) {
        window.location.href = '/login';
    }
};