Ajax POST请求的Laravel csrf令牌不匹配 - Javascript

当使用Ajax向Laravel应用程序发送POST请求时，您可能会遇到与CSRF令牌不匹配的问题。这是因为Laravel使用CSRF保护来防止跨站点请求伪造攻击（CSRF攻击），并要求您在每个表单或每次POST请求中发送CSRF令牌以进行验证。

问题

当您发送POST请求时，您可能会得到以下错误：

419 (unknown status)
CSRF token mismatch.

原因是您的CSRF令牌在请求期间已更改或未在请求中正确发送。

解决方案

以下是一些可能的解决方案：

1. 在Ajax请求标头中设置CSRF令牌

在POST请求中，您可以通过在Ajax配置中设置“X-CSRF-TOKEN”头来发送CSRF令牌。

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

fetch('/some/url', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': token.content
    },
    body: JSON.stringify({
        // 请求主体
    })
})

或者，您可以通过获取页面中放置的CSRF令牌来设置标头。

const token = document.querySelector('input[name="_token"]').value;

// 或者

const token = $('meta[name="csrf-token"]').attr('content');

$.ajax({
    url: "/some/url",
    type: "POST",
    headers: {
        'X-CSRF-TOKEN': token
    },
    data: {
        // 请求主体
    }
});

2. 将CSRF令牌作为POST数据的一部分

您还可以将CSRF令牌作为POST数据的一部分来发送。

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

fetch('/some/url', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        _token: token.content, // 将CSRF令牌添加到POST数据中
        // 请求主体
    })
})

const token = $('meta[name="csrf-token"]').attr('content');

$.ajax({
    url: "/some/url",
    type: "POST",
    data: {
        _token: token, // 将CSRF令牌添加到POST数据中
        // 请求主体
    }
});

3. 更改CSRF令牌的名称

如果您将Laravel所用的CSRF令牌名称更改为您自己的名称，您可以使用以下代码将其发送到服务器。

const myToken = 'my_csrf_token_value';

$.ajax({
    url: "/some/url",
    type: "POST",
    data: {
        my_token: myToken, // 使用新的CSRF令牌名称
        // 请求主体
    }
});

但是，请注意，如果您更改了CSRF令牌的名称，则需要修改Laravel应用程序中的配置文件和相关的代码。

结论

在使用Ajax POST请求时，如果遇到Laravel CSRF令牌不匹配的错误，请注意确保在请求中正确发送了CSRF令牌。如果以上解决方案无法解决问题，请检查您的Laravel应用程序代码是否正确配置CSRF保护。